chrome下的Javascript的任务机制

im, 无色
im, 无色
im, 无色
884
文章
0
评论
2019年7月2日09:10:49 评论 612

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。

im, 无色
  • 本文由 发表于 2019年7月2日09:10:49
2019 年最好用的 JavaScript 图表库 JavaScript

2019 年最好用的 JavaScript 图表库

作者:Saurabh Barot 翻译:王强 大数据时代,收集和使用数据的需求正在爆发式增长,数据可视化也变得愈加重要。开发人员在想方设法将不同数据库中的记录整合到仪表板和漂亮的图表中,向人们快速直观...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: