关于js setTimeout alert阻塞进程

Question

前几天看了关于这方面的一个问题 发现有些没有理解

console.log(0,1,2,3,4)
for(let i=0;i<5;i++){
    setTimeout(function(){
        console.time();
        alert(i);
        console.info(i);
        console.timeEnd()
    },1000)
}

有什么规律可循吗，如果可以希望再详细讲解一下 谢谢！

Answer 1

for循环并不会等待定时器执行完在执行.所以for循环执行完之后,产生了(可以理解成线程)五个线程
然后这五个线程去抢夺cpu时间片,谁先抢到谁执行,所以打印顺序不一致.
在for循环后加一句console.log就可以看效果哦.

Answer 2

我说一下我的理解，希望能对你有所帮助！

首先，你先看一下这段代码的执行结果：

for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.time();
        alert(i);
        console.info(i);
        console.timeEnd()
    }, i * 1000); //区别在这儿
}

这时候你会发现顺序就对了，而且就算当出现0时，你过很久再去点确定，下一个数字1也不是马上跳出来，而且顺序号不会错，这说明什么？我的理解是alert阻塞了代码的执行，整个程序的加载会停止在那儿

至于,你上面那个代码，大家的时间都是相同的，阻塞之后，你点确定的时候，下一次出现的顺序就存在不确定因素，因为这个和定时器延时按顺序执行不一样，程序在第一个弹框时停止工作了，后面的事件大家时间都一样，没有按照原先的顺序进行排队，因此下一次的出现就会出现随机性情况

另外，现在好多浏览器会对弹框进行拦截，还有就是弹框次数过多也会进行拦截，因此项目开发中尽量少用！