JavaScript 中 setTimeout 会产生双倍时间间隔

This topic created in 3562 days ago, the information mentioned may be changed or developed.

代码如下

var testDelay = function testDelay (interval) {
    setTimeout(function () {
        console.log(new Date().getSeconds())
        setTimeout(arguments.callee, interval)
    }, interval)
}

testDelay(1000)

控制台输出如下

控制台输出

预想的效果是每隔 1s 进行一次输出，但是实际效果却是时间间隔变成了 2s ，请问这是为什么呢？

Supplement 1 · Aug 24, 2016

从楼下各位的回复来看，setTimeout的行为确实有些随机性的。《JavaScript高级程序设计（第三版）》的第22章里面说，“关于定时器要记住的最重要的事情是，指定的时间间隔表示何时将定时器的代码添加到队列，而不是合适实际执行代码”。

一个比较实际的例子是，用这个代码实现toast效果时，当执行下面这个语句时

setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);

由于setTimeout的不确定性，在很多移动端浏览器上可能会出现fadeOut动画的结尾出现闪烁的现象。

23 replies • 2016-08-24 17:03:24 +08:00

newghost

Aug 24, 2016

为毛我这里是一秒一个？

var testDelay = function testDelay (interval) {
setTimeout(function () {
console.log(new Date().getSeconds())
setTimeout(arguments.callee, interval)
}, interval)
}

testDelay(1000)
undefined
VM635:3 36
VM635:3 37
VM635:3 38
VM635:3 39
VM635:3 40
VM635:3 41
VM635:3 42
VM635:3 43

shiye515

Aug 24, 2016

原因就是你电脑太卡了，执行 console.log 也要+1s

hansnow

Aug 24, 2016

@newghost what????这我就更想不明白了啊。。。
Chrome 版本： 51.0.2704.84 m (64-bit)
Windows 版本： Microsoft Windows [版本 10.0.10586]

FrankFang128

Aug 24, 2016

你没懂 setTimeout
它不保证准时的

hansnow

Aug 24, 2016

@shiye515 应该不是这样吧？下面的代码就可以输出两个相邻的数字

```javascript
var testDelay = function testDelay (interval) {
console.log(new Date().getSeconds())
setTimeout(function () {
console.log(new Date().getSeconds())
}, interval)
}

testDelay(1000)
```

hansnow

Aug 24, 2016

@FrankFang128 这个我稍微知道一点， setTimeout 只是把代码加入了执行队列。但是前面只有一个 console.log 额。。。打个 log 出来应该不会消耗 1s 的时间吧，而且你看我在#5 贴的代码，是可以输出两个连续的数字的，说明 console.log 没消耗 1s 的时间

UnisandK

Aug 24, 2016

zzNucker

Aug 24, 2016

重新启动浏览器。
笔记本请插上电源用高性能模式。。

虽然我觉得省电模式也不可能 2000ms 一个 tick

lwbjing

Aug 24, 2016

var testDelay = function testDelay (interval) {
setTimeout(function () {
console.log(new Date().getSeconds())
setTimeout(arguments.callee, interval)
}, interval)
}

testDelay(1000)
undefined
VM139:3 53
VM139:3 54
VM139:3 55
VM139:3 56
VM139:3 57
VM139:3 58
VM139:3 59
VM139:3 0
VM139:3 1
VM139:3 2

hansnow

Aug 24, 2016

@newghost
@FrankFang128
@UnisandK
@zzNucker

我已经凌乱了，把 interval 改成 1s 以上的话是正常的，然后我又试着改到了 100ms ，结果就是下面这样的输出。。。这也太看心情了吧。。。