天天一篇js 之定時器

咱們知道js定時器一共有兩種

1. window.setTimeout([function],[interval]) :設置一個定時器，當到達指定時間後執行對應方法（執行一次定時器就結束了）

2. window.setInterval([function],[interval]):設置一個定時器，當到達制定時間後，執行對應方法（之後每間隔這麼長時間都要重新執行定時器中的方法，直到定時器清除爲止，執行不少次）

很少說，咱們上代碼

var count = 0 ;
setTimeout(function(){
    console.log(++cout) //=> 1
},1000)

var count1 = 0 ;
setInterval(function(){
    console.log(++cout) //=> 1
},1000)
複製代碼

• 定時器的返回值：當咱們設置定時器（無論是那種定時器），都會又一個返回值，這個返回值是一個數字，表明在當前瀏覽器中設置的第幾個定時器（返回值是定時器的序號）

繼續上代碼

var count = 0 ;
var timer1 = setTimeout(function(){
    console.log(++cout) //=> 1
},1000)
console.log(timer1)//=> 1

var count1 = 0 ;
var timer2 = setInterval(function(){
    console.log(++cout) //=> 1
},1000)
console.log(timer2)//=> 2
複製代碼

1. 從上面能夠看出，兩種不一樣的定時器雖然是處理不一樣需求的定時器，可是都是瀏覽器的定時器，因此設置的時候，返回的序號是依次排列的
2. 並且setInterval設置完成時會有一個返回值，無論執行多少次，嗲表序號的返回值不變（設置定時器就有返回值，執行多少次是定時器的處理）

清除定時器 (手動清除，除非把瀏覽器關掉)

• clearTimeout([定時器的排隊序號])
• clearInterval([定時器的排隊序號])

var t1 = setTimeout(function(){
    //當方法執行完成以後，清除定時器
    clearTimeout(t1);
    clearInterval(t1)
    t1 = null;
    //手動把序號的變量複製爲null,至關於把排隊好的紙條撕毀扔掉
},1000)
複製代碼

下面咱們結合定時器實現懶加載,懶加載的實現請參考如何實現圖片懶加載

～function(){
    function lazyImg(curImg){
        curImg.isload = true;//避免重複處理isLoad屬性
        var tempImg = new Image;
        tempImg.onload = function(){
            curImg.src = tempImg.src;
            curImg.style.display = 'block';
            imgFade(curImg)；
            tempImg = null;
        }
        tempImg.src = curImg.getAttribute('data-img');
    }
    function imgFade(curImg){
        var n = 0;
        var timer = setTimeout(function(){
            if(n > 1){
                clearInterval(timer);
                timer = null;
                return;
            }
            n += 0.05；
            utils.css(curImg,'opacity',n)
        },17)
        //瀏覽器都有個最小反應時間（谷歌5-7是，ie 10-13s...）因此咱們通常把17s看成定時器的最佳時間
    }
    return{//模塊入口，在入口控制執行順序
        init：function(){
            lazyImg()
        }
    }
}()
var t1 = setTimeout(function(){
    //當方法執行完成以後，清除定時器
    clearTimeout(t1);
    //或者clearInterval(t1)
    t1 = null;
    //手動把序號的變量複製爲null,至關於把排隊好的紙條撕毀扔掉
},1000)
複製代碼