setTimeout和setInterval實現滾動輪播中，清除定時器的思考

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);
})