Question

我不太明白定时器如何在Javascript中工作。 JS是单线程的，因此代码运行，例如用户单击按钮，将单击添加到队列中。队列为空，因此队列看起来像这样：

[点击]

一旦我们当前运行的代码完成就会执行它吗？让我们说相同的代码仍在运行但尚未完成及其日程安排setTimeout(fn,3000)。

现在我不确定我是否做对了。这个fn没有被添加到队列中，但是从此刻开始接近3000ms的某个点（不是从此代码执行结束时）开始。如果此时事件想要触发（从现在开始大约3000ms），其他代码正在执行（可能从上面[点击]），那么fn将被放在队列的末尾。

现在回到我们原来的运行代码，[click]在队列中，代码进一步运行。现在我们运行的代码更改DOM中某个元素的样式属性并添加边框。当浏览器刷新UI时，必须完成此更改。由于JS正在运行其他代码，所以它不会立即可见，因此在单击后添加，因此队列现在看起来像这样：

[点击] [UI刷新 - 它可能会改变其他方面的边界]

所以现在队列包含当前运行JS结束时要调用的两个事件。它将调用[click]，用户仍然不会看到我们之前的代码请求的边框更改。单击完成后，队列中的下一个事件将跳转到UI刷新。它可能会做大量的绘图，包括我们在早期代码运行时请求的边框更改。

如果在执行click事件期间或UI对显示进行更改并重新绘制我们计划的计时器屏幕时，fn将被添加到队列中并尽快执行。

我的理解是否正确？如果有人能够澄清我是否误解了某些东西并解释我错误的地方那会很棒。一旦我澄清了这一点，我会将这个问题扩展到setTimeout(fn,0)技巧，因为这真的让我更加困惑。

Answer 1

您对事件循环的工作方式是正确的。它是一个单线程环境，你有一堆被安排执行的任务（或函数）和执行它们的循环。

根据某人的建议，UI刷新操作不在此循环之外。但是，它也没有被安排为单独的任务。它作为点击处理程序的一部分同步执行。

[click [UI action] ]

同步/异步

同步操作是阻止代码执行直到完成的操作。换句话说，如果你对JavaScript引擎（“绘制边框”）说，它将确保在执行代码的下一行之前绘制边框。您可以使用以下示例轻松验证：

 $(".suggest-edit-post").css('background-color', 'red');
 $(".suggest-edit-post").css('background-color');// 'red'

因此，DOM操作是JavaScript中为数不多的同步操作之一。其他此类操作包括用于打开弹出窗口的alert，confirm等方法。

通常可以通过观察某个函数是否具有回调参数（或其他一些传递回调函数的机制）来猜测某个函数是异步的。

例如ajax()函数是异步的，因此在单击时调用它看起来像这样。

[click[ajax.get]]           [ajax.success]
|       |       |       |       |       |       |       |       |     
1               2               3               4               5

所以你做get，有一个暂停，在此期间可以完成其他任务，然后响应到达并执行回调。然后它可以发出其他请求，这些请求有自己的回调等。

的setTimeout（FN，0）

所有这些（事件循环）都由运行时处理。这有一些好的和坏的方面：它很好，因为你不需要处理线程进程等等 - 你只需要指定你想要发生的事情，比如说，你收到你的ajax调用的响应和运行时才能实现它。

这也很糟糕，因为你无法真正暂停并安排在哪个动作发生之后：一旦任务开始执行，它必须执行到下一个任务开始之前的结束。

如果我们没有同时发生的很多事情，那么这不是问题：

[click[ajax.get]]               [ajax.success]
|       |       |       |       |       |       |       |       |     
1               2               3               4               5

在这种情况下，success函数在响应到达时执行。

但是如果我们安排了一些非常复杂的数据操作或动画在暂停中执行会发生什么：

[click[ajax.get]] [complex data manipulation/animation] [ajax.success]
|       |       |       |       |       |       |       |       |     
1               2               3               4               5

我们可能不希望我们的success函数（可能向用户显示一些重要信息）的执行被推迟以支持其他一些功能，但是我们不能重新安排任务，也不能优先考虑它们，所以没有解决这个问题的方法。

所以有时候我们可能会迟到。好的，但有多晚？好吧，引擎会尝试按时执行这些内容，因此我们可能需要等待任务的时间等于我们最大任务的持续时间。因此，如果我们所有的任务都很短，我们就可以了。

setTimeout(fn,0)允许您将任务拆分为几个在循环中更好处理的较短任务。

[click[ajax.get]] [animation] [ajax.success] [animation] [animation] 
|       |       |       |       |       |       |       |       |     
1               2               3               4               5

假设您必须使用新数据更新一堆HTML元素：

new_values.forEach(function(val, index){
  elements[index].text(val)
})

要在单独的任务中执行此操作，您只需：

new_values.forEach(function(val, index){
  setTimeout(function(){
      elements[index].text(val)
  }, 0)
})

现在不是一项大任务，而是一堆较小的任务。

P.S。这是setTimeout(fn,0)的唯一合法用途。

定时器如何在Javascript中工作？

1 个答案:

同步/异步

的setTimeout（FN，0）