2 weixin 40253609 weixin_40253609 于 2017.09.15 12:36 提问

jq中,点击事件触发前移除定时器,等点击完20秒后怎么才能继续执行定时器内容,做的是一个轮播图
var indexed = 0;
var mySetInt;
var timeSetInt;
$("#bannerDiv ul li:eq(0)").css({"background-image": "url(imgs/banner_01.jpg)","z-index": "1"});
$("#bannerDiv ul li:eq(1)").css("background-image", "url(imgs/banner02.jpg)");
$("#bannerDiv ul li:eq(2)").css("background-image", "url(imgs/banner03.jpg)");

mySetInt = setInterval(mySetIntFun, 5000);
timeSetInt = 

function mySetIntFun() {
    if(indexed >= 2) {
        var index = 0;
    } else {
        var index = indexed + 1;
    }

    $("#bannerDiv ol li").eq(index).attr("class", "clickLi").siblings().removeAttr("class");
    $("#bannerDiv ul li").eq(index).css({"left": "1920px","z-index": "2"}).animate({"left": "0px"}, 1000);
    $("#bannerDiv ul li").eq(index).siblings().css("z-index", "0");
    $("#bannerDiv ul li").eq(indexed).css("z-index", "1");

    indexed = index;
}

$("#bannerDiv ol li").click(function() {
    clearInterval(mySetInt);

    var index = $(this).index();

    if(index != indexed) {

// clearInterval(mySetInt01);
$(this).attr("class", "clickLi").siblings().removeAttr("class");
$("#bannerDiv ul li").eq(index).css({"z-index": "2"}).animate({"left": "0px"}, 1000);
$("#bannerDiv ul li").eq(index).siblings().css("z-index", "0");
$("#bannerDiv ul li").eq(indexed).css("z-index", "1");

        indexed = index;

    } else {};

    var mySetInt01;
    mySetInt01 = setInterval(mySetIntFun01, 5000);

    function mySetIntFun01() {
        if(indexed >= 2) {
            var index = 0;
        } else {
            var index = indexed + 1;
        }

        $("#bannerDiv ol li").eq(index).attr("class", "clickLi").siblings().removeAttr("class");
        $("#bannerDiv ul li").eq(index).css({
            "left": "1920px",
            "z-index": "2"
        }).animate({
            "left": "0px"
        }, 1000);
        $("#bannerDiv ul li").eq(index).siblings().css("z-index", "0");
        $("#bannerDiv ul li").eq(indexed).css("z-index", "1");

        indexed = index;
    }

});



我在click事件里写了个新的定时器,但是每次触发click事件都会执行后面的定时器,到后面就会发生混乱,求大神指导,该怎么改才对

6个回答

github_38725775
github_38725775   2017.09.15 13:30

这个逻辑不应该是这样吗

click 移除 轮播计时器

setTimout(function(){( 添加轮播计时器 )},20000)

weixin_40253609
weixin_40253609 我写完setTimeout之后,就自动轮播了一次,就不动了呢。。。
2 个月之前 回复
sunny_desmond
sunny_desmond   2017.09.15 13:41

点击完20秒后执行的话 ,你应该用settimeout 啊

weixin_40253609
weixin_40253609 setTimeout是写在click事件里面的对不对,我写完这个之后,轮播执行了一次,又不动了,是哪里写错了吗
2 个月之前 回复
u010715243
u010715243   2017.09.15 14:32

定时器用个对象存,js可以空值对象停止或开始

u010715243
u010715243 阻止事件冒泡,再点击就不会触发了
2 个月之前 回复
u010715243
u010715243 回复weixin_40253609: 而且我看的说执行click都会触发是事件冒泡引起的
2 个月之前 回复
u010715243
u010715243 回复weixin_40253609: http://www.cnblogs.com/blue123/p/5715295.html
2 个月之前 回复
weixin_40253609
weixin_40253609 那怎么控制呢,我这个用jq写的,然后我就不知道该怎么改了。。。(┬_┬)
2 个月之前 回复
github_38725775
github_38725775   2017.09.15 14:35

写个简单demo帮助你理解

var timer ;
function setTime(){
    console.log("------start----")
    timer = setInterval(function(){
        console.log(1)
    },1000)
}
setTime();

document.getElementById("timer").onclick = function(){
    console.log("暂停5s")
    clearInterval(timer)
    setTimeout(setTime,5000)
}

html
click

weixin_40253609
weixin_40253609 大神,我的banner写完了setTimeout(mySetIntFun,5000);之后,轮播了一次,就不继续轮播了,然后每次点击之后,会做一次轮播动作,我想让它在点击之后,5S内再没有点击事件的话,就继续轮播,是需要怎么调整呢,我把改过的代码粘贴在下面了,麻烦您帮我看一下,辛苦了
2 个月之前 回复
sunny_desmond
sunny_desmond   2017.09.15 14:36
$("#bannerDiv ol li").click(function() {
    clearInterval(mySetInt);
    var index = $(this).index();
    if (index != indexed) { // clearInterval(mySetInt01);
        $(this).attr("class", "clickLi").siblings().removeAttr("class");
        $("#bannerDiv ul li").eq(index).css({ "z-index": "2" }).animate({ "left": "0px" }, 1000);
        $("#bannerDiv ul li").eq(index).siblings().css("z-index", "0");
        $("#bannerDiv ul li").eq(indexed).css("z-index", "1");
        indexed = index;
    } else {};
    var mySetInt01;
    mySetInt01 = setInterval(mySetIntFun01, 5000);

    function mySetIntFun01() { if (indexed >= 2) { var index = 0; } else { var index = indexed + 1; } $("#bannerDiv ol li").eq(index).attr("class", "clickLi").siblings().removeAttr("class");
        $("#bannerDiv ul li").eq(index).css({ "left": "1920px", "z-index": "2" }).animate({ "left": "0px" }, 1000);
        $("#bannerDiv ul li").eq(index).siblings().css("z-index", "0");
        $("#bannerDiv ul li").eq(indexed).css("z-index", "1");
        indexed = index; }
});

你第一下点击清除后,第二个又执行了 这个 mySetInt01 = setInterval(mySetIntFun01, 5000); 这个是什么操作

weixin_40253609
weixin_40253609 那个是之前想着,下面再写个新的定时器 ,然后定义的,但是发现这样实现不了,已经改了
2 个月之前 回复
weixin_40253609
weixin_40253609   2017.09.15 15:09

var indexed = 0;
var mySetInt;
$("#bannerDiv ul li:eq(0)").css({"background-image": "url(imgs/banner_01.jpg)","z-index": "1"});
$("#bannerDiv ul li:eq(1)").css("background-image", "url(imgs/banner02.jpg)");
$("#bannerDiv ul li:eq(2)").css("background-image", "url(imgs/banner03.jpg)");

mySetInt = setInterval(mySetIntFun, 5000); 

// var timeInt = setTimeout(mySetIntFun,5000);

function mySetIntFun() {
    if(indexed >= 2) {
        var index = 0;
    } else {
        var index = indexed + 1;
    }

    $("#bannerDiv ol li").eq(index).attr("class", "clickLi").siblings().removeAttr("class");
    $("#bannerDiv ul li").eq(index).css({"left": "1920px","z-index": "2"}).animate({"left": "0px"}, 1000);
    $("#bannerDiv ul li").eq(index).siblings().css("z-index", "0");
    $("#bannerDiv ul li").eq(indexed).css("z-index", "1");

    indexed = index;
}

$("#bannerDiv ol li").click(function() {
    clearInterval(mySetInt);

    var index = $(this).index();

    if(index != indexed) {
        $(this).attr("class", "clickLi").siblings().removeAttr("class");
        $("#bannerDiv ul li").eq(index).css({"z-index": "2"}).animate({"left": "0px"}, 1000);
        $("#bannerDiv ul li").eq(index).siblings().css("z-index", "0");
        $("#bannerDiv ul li").eq(indexed).css("z-index", "1");

        indexed = index;
    } else {};

    setTimeout(mySetIntFun,5000);


});



我这样改完了之后,点击时间之后,就再重新轮播了一次,然后就不再继续轮播了,我想让banner在5秒没有点击事件后,能继续轮播,哪里需要调整,是还要做判断吗
github_38725775
github_38725775 回复算不算码农: setTimout(()=>{mySetInt = setInterval(mySetIntFun, 5000)} ,5000)
2 个月之前 回复
github_38725775
github_38725775 setTimout 里面放的函数 内容应该是个轮播方法。 你不如把 setTimout改成 setTimeout(function(){})
2 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片