3

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

[点击]

这将在我们当前运行的代码完成后立即执行，对吗？假设相同的代码仍在运行，但尚未完成，它的时间表setTimeout(fn,3000)。

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

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

[单击] [UI 刷新 - 它可能会更改边框等]

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

如果在单击事件执行期间或当 UI 更改显示并重新绘制屏幕时，我们安排的计时器触发，fn将被添加到队列中并尽快执行。

我的理解正确吗？如果有人能澄清我是否误解了某些东西并解释我在哪里做错了，那就太好了。一旦我澄清了这一点，我将把这个问题扩展到setTimeout(fn,0)欺骗，因为这真的让我更加困惑。

4

1 回答 1

2

您对事件循环的工作方式是正确的。这是一个单线程环境，您有一堆计划执行的任务（或函数）以及执行它们的循环。

正如有人建议的那样，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，有一个暂停，在此期间可以完成其他事情，然后响应到达并执行你的回调。然后它可以发出其他请求，这些请求有自己的回调等。

设置超时（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)
})

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

PS 这是唯一合法的使用setTimeout(fn,0)。

于 2015-01-17T16:15:51.953 回答