Javascript Evet Loop 模型

setTimeout()最短的事件间隔是4ms
setInterval()最短的事件间隔是10ms
以上这个理论反正我是没有验证过

Exemple 1

——question:——

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

——非chrome result:——

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

——node.js result——

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

——windows/mac chrome result:——

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

在windows chrome里setTimeout 2上方会出现连续两个setInterval，有些奇怪,在mac的chrome和windows的firefox都是正常的输出（发生错误的window chrome版本号为：Version 65.0.3325.181 (Official Build) (64-bit))

经过更多次测试，关于上述结论做如下更正:
windows/mac chrome 运行这段代码有时会出现双setInterval情况，而另一些时候则和非chrome浏览器环境运行无异。这种情况笔者暂时还没有找到准确的答案。

——windows chrome exemple:——

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下跑上面这段代码并不会出错

Exemple 2

——question:——

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

——result:——

结果：只进行了一次expendTime()计算

mac 17对于expendTime()的运行事件大概在30ms朝上，setInterval()设定的间隔是15ms，所以在expendTime()没有执行完毕的时候并没有再添加一个expendTime()到task queue中（函数结尾setInterval()被清除），所以结果才只进行了一次expendTime()的计算

Example 3

将Example 2中的代码做如下修改，再次进行测试

——question:——

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

——chrome result:——

输出了两次后被停止

——非chrome result:——

输出一次后停止，证明在大多数浏览器上，Exemple 2中的结论是正确的

——conclusion:——

又是在chrome上出现了不合理的诡异的行为。和标准中event loop的理论相悖

Example 4

——question:——

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

——answer:——

这题考察了对闭包和定时器另外还有js执行顺序的理解。
先来说说fn1，如果把clearTimeout去掉，相信大家一定很熟悉，都会说10ms延迟后会依次输出0,1,2,3。
但是，请注意这里加了个clearTimeout，如果你去控制台实验的话会发现只输出了0,1,2，那3呢？
先别急，请听我慢慢道来：
请注意：这个tc是定义在闭包外面的，也就是说tc并没有被闭包保存，所以这里的tc指的是最后一个循环留下来的tc，所以最后一个3被清除了，没有输出。

再来看看fn2，可以发现区别就是把setTimeout改为了setInterval,同时把定时器也传到了闭包里。
那么结果又会有什么不同呢？如果亲自去实验的同学就会发现输出0,1,2,3,3,3…。
什么鬼？为毛最后一个定时器没被删除。说实话，我在这里也想了很久，为何最后一个定时器没被删除。后来我为了调试方便把i<4改为了i<2并把触发时间改为3s，在浏览器中单步调试，发现3s后第一次触发回调函数执行的时候tc的值是undefined第二次触发的时候有值了。这个时候我顿悟，这和程序的执行顺序有关。我们知道js正常情况下是从上到下，从右到左执行的。
所以这里每次循环先设置定时器，然后把定时器的返回值赋值给tc。在第一次循环的时候tc并没有被赋值，所以是undefined，在第二次循环的时候，定时器其实清理的是上一个循环的定时器。所以导致每次循环都是清理上一次的定时器，而最后一次循环的定时器没被清理，导致一直输出3。

文章TAG：chrome  javascript  任务  机制  chrome下的Javascript的任务机制