注意點——setTimeout、setInterval使用

setTimeout和setInterval

setTimeout的使用

setTimeout(cb, time);複製代碼

setTimeout傳入的是兩個參數，第一個參數是cb表明的是回調函數callback，第二個表明的是時間，以ms計算

setInterval的使用

setInterval(cb, time);複製代碼

setInterval傳入的也是兩個參數，第一個參數是cb表明的是回調函數callback，第二個表明的也是時間，以ms計算

setTimeout和setInterval的區別和注意點

區別

setTimeout含義是定時器，到達必定的時間觸發一次，可是setInterval含義是計時器，到達必定時間觸發一次，而且會持續觸發

相互之間的轉換

function run() {
    //其餘代碼
    setTimeout(function(){
        run();
    }, 10000);
}
setInterval(function(){
    run();
}, 10000);複製代碼

• 上面的代碼仍是有區別的：
  第一段代碼使用的是setTimeout來實現的，這個實現就有一個缺點，就是setTimeout是在代碼的執行時間上加10秒，好比run()執行了100s,而整個過程多是110s，
  第二段代碼就不同了，setInterval是當run()跑了不到10s，那麼就是10s走一回，若是setInterval大於10s，咱們後面詳解。

你真的瞭解麼————setInterval

setInterval(function(){
    // ...
}, 100)複製代碼

咱們先思考三種狀況

• 第一個當執行時間小於100ms的時候

小於100ms

• 第二個大於100ms時，如150ms這樣的在第二個週期以內
  當執行完後他會當即觸發第二次

100ms～200ms之間

• 那咱們來看一下第三種狀況，如500ms，遠遠大於100ms
  其實根據setInterval的機制，他會拋棄掉中間所發生的，咱們用圖表來看一看就明白了

遠大於100ms

你真的瞭解——setTimeout

第一個，常常會出錯的問題就是setTimeout中的this

var i = 0;
const o = {
    i: 1;
    fn: function(){
        console.log(this.i);
    }
}
setTimeout(o.fn, 1000); //0複製代碼

這裏能夠看出，若是是o對象調用的話，就會是1，可是他輸出的確實0，由於有兩點緣由：
1.setTimeout是運行在全局環境下的
2.其實他是發生了下面的步驟：

var a = o.fn;
a();
//只有這樣，this纔會被綁定到全局上去複製代碼

第二個，setTimeout還能幹什麼？

其實不是的，咱們先來看一下，setTimeout的一個面試中常常會問到的問題

setTimeout(function(){
    console.log(1);
},0);
console.log(2);複製代碼

其實這個特性說來話長，輸出的是先2後1，由於setTimeout會把第一個函數放進任務隊列，而後走一個event loop，因此會先輸出的是2，纔會輸出1

那咱們試想一下，這個特性咱們能夠用來作什麼？當事件冒泡的時候，會正常狀況下，會先觸發子元素，而後在觸發父元素，那麼咱們使用這個特性是否是能讓其先觸發父元素，在觸發子元素，(題主沒試過)

備註：
若是以爲寫的好，動動手指點個贊，若是想要關注我，能夠去在下的github點個贊，我會堅持輸出，致敬共同努力的同志們🙏

知識源於網絡，實踐產生真知，若有雷同，侵刪。