setTimeout與setInterval的坑以及優缺點

說到setTimeout與setInrerval你們可能都以爲很easy，我剛接觸js的也是這樣的想法，可後來在知乎看到了一道題，大概好像是這樣的：

例一：

setTimeout(function(){

console.log("小馬「);

setTimeout(function(){arguments.callee;},1000);

},1000)

例二：

setInterval(function(){console.log("小馬「);},1000);

問一與二的區別？

說實話我剛看到這個題目的時候是懵比的，由於我以爲這二者是徹底同樣的呀，都是間隔1000ms以後執行回調的呀，但是既然這麼問了確定他們之間是有區別的，因而乎我就去查了相關的資料，果真，兩者不只僅是有差異的，並且定時器也顛覆了我以往的認知。

首先，這兩個定時器的基本含義我就不重複了，我以爲只要是個學前端的確定沒有不知道的。爲何說定時器也顛覆了我以往的認知呢？由於我發現定時器的回調函數並非至關於在時間到了就執行，而是有一個主js執行進程，這個進程是頁面剛加載的時候頁面按照加載順序執行的js代碼，此外還有一個須要在進程空閒的時候執行的代碼隊列，而咱們所說的定時器的回調就是至關於（以上的例一爲例）在1000ms以後把定時器回調放入到空閒隊列中（注意，空閒隊列有可能還有其它的代碼，好比點擊事件，所以定時器回調放入的位置不必定是空閒隊列的開始位置！）舉個例子：

 var i=0;

function a(){

t=setTimeout(function(){console.log("小明")},0);

}

a();

alert(」小紅「);

 此時你會發現先彈出小紅，又彈出的小明！！

好了，簡單的能夠理解位定時器和js其餘程序是並行執行的，不過jquery的做者有一篇文章專門介紹這個隊列的，有興趣的能夠搜一下看看！！

接下來講第二點，就是例一與例二的區別：

setInterval有個很煩的地方就是當js主程序空閒時候，執行代碼隊列裏面的代碼的時候，若是此時候咱們有一個問題，定時器是等到回調執行完，纔開始計時進行下次循環呢？仍是隻要一次計時完畢，插入回調以後無論回調執不執行就開始計時呢？答案顯然是後者，這也就是我說setInterval坑比的緣由啊，由於這會出現一種狀況，當咱們插入回調的時候前隊列有別的代碼在執行，這時候回調確定是不會執行的，所以若是這個時候無限定時時間到了會再次插入回調，這個時候若是發現隊列中的第一次回調沒有執行，那麼再次插入的回調瀏覽器就默認取消，（這是以防出現回調連續執行屢次的狀況）可是這又引起了新的狀況就是有些回調是不能取消掉的？

這就是咱們常用例一代替例二的緣由，例一能夠避免上述的狀況。累，很簡單的東西被我說的這麼複雜，我也是醉了，看來文字功底還很欠缺，但是個人夢想是新時代的做家，這可咋整呢？