摘要：在第一次循環(huán)的時(shí)候并沒有被賦值，所以是，在第二次循環(huán)的時(shí)候，定時(shí)器其實(shí)清理的是上一個(gè)循環(huán)的定時(shí)器。所以導(dǎo)致每次循環(huán)都是清理上一次的定時(shí)器，而最后一次循環(huán)的定時(shí)器沒被清理，導(dǎo)致一直輸出。

setTimeout()最短的事件間隔是4ms
setInterval()最短的事件間隔是10ms
以上這個(gè)理論反正我是沒有驗(yàn)證過

console.log("start");

const interval = setInterval(() => {  
console.log("setInterval");
}, 0);

setTimeout(() => {  
console.log("setTimeout 1");
Promise.resolve()
    .then(() => {
        console.log("promise 3");
    })
    .then(() => {
        console.log("promise 4");
    })
    .then(() => {
        setTimeout(() => {
        console.log("setTimeout 2");
        Promise.resolve()
            .then(() => {
                console.log("promise 5");
            })
            .then(() => {
                console.log("promise 6");
            })
            .then(() => {
                clearInterval(interval);
            });
        }, 0);
    });
}, 0);

Promise.resolve()
    .then(() => {  
        console.log("promise 1");
    })
    .then(() => {
        console.log("promise 2");
    });
    

    
start
promise 1
promise 2
setInterval
setTimeout 1
promise 3
promise 4
setInterval
setTimeout 2
promise 5
promise 6

start
promise 1
promise 2
setInterval
setTimeout 1
promise 3
promise 4
setInterval
setTimeout 2
setInterval
promise 5
promise 6

start
promise 1
promise 2
setInterval
setTimeout 1
promise 3
promise 4
setInterval
setInterval
setTimeout 2
promise 5
promise 6

在windows chrome里setTimeout 2上方會(huì)出現(xiàn)連續(xù)兩個(gè)setInterval，有些奇怪,在mac的chrome和windows的firefox都是正常的輸出（發(fā)生錯(cuò)誤的window chrome版本號(hào)為：Version 65.0.3325.181 (Official Build) (64-bit))

經(jīng)過更多次測(cè)試，關(guān)于上述結(jié)論做如下更正:
windows/mac chrome 運(yùn)行這段代碼有時(shí)會(huì)出現(xiàn)雙setInterval情況，而另一些時(shí)候則和非chrome瀏覽器環(huán)境運(yùn)行無(wú)異。這種情況筆者暫時(shí)還沒有找到準(zhǔn)確的答案。

console.log("start");

var nerdPointer;
function nerdFunc(){
    console.log("setInterval");
    nerdPointer = setTimeout(nerdFunc,0);
}
setTimeout(nerdFunc,0);

setTimeout(() => {  
console.log("setTimeout 1");
Promise.resolve()
    .then(() => {
        console.log("promise 3");
    })
    .then(() => {
        console.log("promise 4");
    })
    .then(() => {
        setTimeout(() => {
        console.log("setTimeout 2");
        Promise.resolve()
            .then(() => {
                console.log("promise 5");
            })
            .then(() => {
                console.log("promise 6");
            })
            .then(() => {
                clearInterval(nerdPointer);
            });
        }, 0);
    });
}, 0);

Promise.resolve()
    .then(() => {  
        console.log("promise 1")
    })
    .then(() => {
        console.log("promise 2")
    });

windows chrome下跑上面這段代碼并不會(huì)出錯(cuò)

function expendTime(k){
    console.log((new Date()).getTime());
    while(k < 1000){
        for(var j = 2; j < k; j++){
            if(k%j == 0){
                break;
            }
            if(j == k-1){
                console.log(k)
            }
        }
        k++;
    }
    console.log((new Date()).getTime());
    clearInterval(t);
}

var t = setInterval(expendTime,15,3);

結(jié)果：只進(jìn)行了一次expendTime()計(jì)算

mac 17對(duì)于expendTime()的運(yùn)行事件大概在30ms朝上，setInterval()設(shè)定的間隔是15ms，所以在expendTime()沒有執(zhí)行完畢的時(shí)候并沒有再添加一個(gè)expendTime()到task queue中（函數(shù)結(jié)尾setInterval()被清除），所以結(jié)果才只進(jìn)行了一次expendTime()的計(jì)算

將Example 2中的代碼做如下修改，再次進(jìn)行測(cè)試

function expendTime(k){
    console.log((new Date()).getTime());
    while(k < 10000){
        for(var j = 2; j < k; j++){
            if(k%j == 0){
                break;
            }
            if(j == k-1){
                console.log(k)
            }
        }
        k++;
    }
    console.log((new Date()).getTime());
}

var t = setInterval(expendTime,15,3);
setTimeout(function (){clearInterval(t);},30);

輸出了兩次后被停止

輸出一次后停止，證明在大多數(shù)瀏覽器上，Exemple 2中的結(jié)論是正確的

又是在chrome上出現(xiàn)了不合理的詭異的行為。和標(biāo)準(zhǔn)中event loop的理論相悖

function fn1() {
    for (var i = 0; i < 4; i++) {
        var tc = setTimeout(function(i) {
            console.log(i);
            clearTimeout(tc)
        }, 10, i);
    }
}

function fn2() {
    for (var i = 0; i < 4; i++) {
        var tc = setInterval(function(i, tc) {
            console.log(i);
            clearInterval(tc)
        }, 10, i, tc);
    }
}
fn1();
fn2();

這題考察了對(duì)閉包和定時(shí)器另外還有js執(zhí)行順序的理解。
先來說說fn1，如果把clearTimeout去掉，相信大家一定很熟悉，都會(huì)說10ms延遲后會(huì)依次輸出0,1,2,3。
但是，請(qǐng)注意這里加了個(gè)clearTimeout，如果你去控制臺(tái)實(shí)驗(yàn)的話會(huì)發(fā)現(xiàn)只輸出了0,1,2，那3呢？
先別急，請(qǐng)聽我慢慢道來：
請(qǐng)注意：這個(gè)tc是定義在閉包外面的，也就是說tc并沒有被閉包保存，所以這里的tc指的是最后一個(gè)循環(huán)留下來的tc，所以最后一個(gè)3被清除了，沒有輸出。

再來看看fn2，可以發(fā)現(xiàn)區(qū)別就是把setTimeout改為了setInterval,同時(shí)把定時(shí)器也傳到了閉包里。
那么結(jié)果又會(huì)有什么不同呢？如果親自去實(shí)驗(yàn)的同學(xué)就會(huì)發(fā)現(xiàn)輸出0,1,2,3,3,3...。
什么鬼？為毛最后一個(gè)定時(shí)器沒被刪除。說實(shí)話，我在這里也想了很久，為何最后一個(gè)定時(shí)器沒被刪除。后來我為了調(diào)試方便把i<4改為了i<2并把觸發(fā)時(shí)間改為3s，在瀏覽器中單步調(diào)試，發(fā)現(xiàn)3s后第一次觸發(fā)回調(diào)函數(shù)執(zhí)行的時(shí)候tc的值是undefined第二次觸發(fā)的時(shí)候有值了。這個(gè)時(shí)候我頓悟，這和程序的執(zhí)行順序有關(guān)。我們知道js正常情況下是從上到下，從右到左執(zhí)行的。
所以這里每次循環(huán)先設(shè)置定時(shí)器，然后把定時(shí)器的返回值賦值給tc。在第一次循環(huán)的時(shí)候tc并沒有被賦值，所以是undefined，在第二次循環(huán)的時(shí)候，定時(shí)器其實(shí)清理的是上一個(gè)循環(huán)的定時(shí)器。所以導(dǎo)致每次循環(huán)都是清理上一次的定時(shí)器，而最后一次循環(huán)的定時(shí)器沒被清理，導(dǎo)致一直輸出3。