javascript - SetTimeout 重叠？

Question

这是我的一段代码。图像在 23 毫秒后正常可见，但永远不会像第二行所示那样返回隐藏状态。如果我将其从 17 毫秒更改为大于 23 毫秒的值，它就会起作用。反之亦然，如果我将第一行更改为 16 毫秒，它就会起作用。看起来第二行在第一行之前执行并完成，因此它保持可见。我该如何解决这个问题？

setTimeout(function(){img.style.visibility = 'visible';},23);
setTimeout(function(){img.style.visibility = 'hidden';},17);

Answer 1

这两行都紧接着执行。然后，稍后，您传递给 setTimeout 的函数将被调用。他们会根据您指定的延迟时间进行调用。因此，当您给第二个延迟更短的延迟时，它当然会首先被调用。

如果您的目标是让 img 在 23 毫秒后变得可见，然后在 17 毫秒之后再次不可见，您需要将第二个调用放在第一个调用内。

setTimeout(function(){
    img.style.visibility = 'visible';
    setTimeout(function(){
        img.style.visibility = 'hidden';
    }, 17);
}, 23);

话虽如此，请记住人类是缓慢而笨拙的生物。 :-) 对于一个正常人来说，这个图像基本上是看不到的，17ms 的间隔太短了。