阅读《深入理解JavaScript定时机制》

本文详细探讨了JavaScript中定时器的工作原理,特别是setTimeout与setInterval的区别,并通过实例演示了它们在事件循环中的行为表现。

javascript的引擎是单线程的

javascript的引擎是基于事件驱动的

setTimeout和setInterval都是往事件队列中增加一个待处理事件而已。setTimeout是触发一次,而setInterval是循环触发。

但是

想要使用setTimeout循环触发

可以这样做:

1
2
3
4
setTimeout(function() {
        /* 代码块... */
        setTimeout(arguments.callee, 10);
}, 10);

这个看起来和

1
2
3
setInterval(function(){
        /*代码块... */
}, 10);

但是上一份代码中,是执行完了代码块,才挂起来这个事件,所以两次执行时间会大于10,而第二份代码,是自动在10的时候挂上这个事件,所以两次事件相隔的时间会小于等于10(这个说法还是有点憋屈。。。)

但是要明确:

当线程阻塞在一个事件的时候,不管是使用setInterval还是setTimeout都需要等待当前事件处理完才能执行。

比如下面例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
 
function sleep(d){
    document.write(Date.now() + "<br>");
    for(var t = Date.now();Date.now() - t <= d;) {
 
    }
}
 
setInterval(function() {
    sleep(9123)
}, 1000);
 
</script>

它不会是1s打印一次,而是大约9s才打印一次,这就是由于线程被阻塞在for循环中了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值