setTimeout和setInterval实现滚动轮播中，清除定时器的思考

时间：2023-03-08 15:55:25

PS:希望各路大神能够指点

setTimeout(function,time):单位时间内执行一次函数function，以后不执行；对应清除定时器方法为clearTimeout;

setInterval(function,time):单位时间内执行一次函数function，以后一直重复执行函数；对应清除定时器方法为clearInterval;

其中function为函数名，假设其函数名为AutoPlay，其中如果写成AutoPlay，则表示这个函数，写成AutoPlay()则表示函数执行后的结果。但是两种写法函数最终都会执行。

当然我们也可以通过函数可以调用自身的特性用setTimeout来创建一个永久循环的函数，那么它的效果似乎和setInterval一样了，但实际上在细微之处是有区别的

setTimeout：

eg1：

function Automatism(){

    func1... //函数执行话费时间400ms

    setTimeout(Automatism(), 300);

}

setTimeout(Automatism(), 600); //实际是：func1 400s，600ms后在执行400s

setInterval：　

eg2：

function Automatism(){

    func1... //函数执行话费时间400ms

} setInterval(Automatism(), 600);  //实际是：func1开始执行时已开始计时，每隔600ms执行一次

清除定时：

清除定时人人都会，但这次我在撸轮播的过程中却发现无论如何也清不掉，经过几次测试才发现是因为使用setTimeout调用了自身的缘故.如何eg1中例子，即当我们使用setTimeout来达到重复执行的时候clearTimeout似乎失效了（目前不知道原因，请高手指点啊）。

最后换用setInterval可以正常工作。

最后贴上代码：

HTML：

<div class="companyBusiness" id="companyBusiness">

    <dd id="album">

        <img src="../images/companyBusiness.png" />

        <img src="../images/companyBusiness.png" />

        <img src="../images/companyBusiness.png" />

        <img src="../images/companyBusiness.png" />

    </dd>

    <p id="circle">

        <span class="on"></span>

        <span></span>

        <span></span>

        <span></span>

    </p>

</div>

CSS：

.companyBusiness{position: relative;width: 340px;height: 200px;overflow: hidden;display: inline-block;vertical-align: top;}

.companyBusiness dd{position: relative;display: inline-block;vertical-align: top;width: 1360px;transition: margin-left 0.8s ease-in-out;}

.companyBusiness dd img{width: 340px;height: auto;vertical-align: top;}

.companyBusiness p{position: absolute;bottom: 14px;right: 14px;}

.companyBusiness p span{display: inline-block;width: 7px;height: 7px;border-radius: 20px;background-color: #fff;margin-left: 5px;}

.companyBusiness p span.on{background-color: #da1622;}

.foucs_middle dt{width: 311px;display: inline-block;vertical-align: top;}

.foucs_middle dt img{width: 100%;height: auto;}

JS(清除定时器)：

var timer = null;

$("#circle span").click(function(){

    clearTimeout(timer);

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

    var dis = -(_thisIndex) * parseInt($("#companyBusiness").width());

    $("#album").css("margin-left", dis);

    $(this).addClass("on").siblings().removeClass("on");

    timer = setTimeout("AutoPlay()", 3000);

});

function AutoPlay() {

    var _thisIndex = $("#circle span.on").index();

    _thisIndex++;

    if (_thisIndex > 3) _thisIndex = 0;

    $("#circle span").eq(_thisIndex).trigger("click");

    setTimeout("AutoPlay()", 3000);

}

$(function() {

    timer = setTimeout("AutoPlay()", 3000);

})

JS(不能清除定时器)：

var timer = null;

$("#circle span").click(function(){

    clearInterval(timer);

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

    var dis = -(_thisIndex) * parseInt($("#companyBusiness").width());

    $("#album").css("margin-left", dis);

    $(this).addClass("on").siblings().removeClass("on");

    timer = setInterval("AutoPlay()", 3000);

});

function AutoPlay() {

    var _thisIndex = $("#circle span.on").index();

    _thisIndex++;

    if (_thisIndex > 3) _thisIndex = 0;

    $("#circle span").eq(_thisIndex).trigger("click");

}

$(function() {

    timer = setInterval("AutoPlay()", 3000);

})

　　

相关文章