我不太明白定时器在 Javascript 中是如何工作的。 JS 是单线程的，所以代码可以运行，例如用户点击按钮，点击被添加到队列中。队列是空的，所以队列看起来像这样:
[点击]
一旦我们当前运行的代码完成，它就会被执行，对吗？假设相同的代码仍在运行，但尚未完成，其时间表 setTimeout(fn,3000)。
现在我不确定我是否做对了。此 fn 未添加到队列中，但会在从此时起(不是从此代码执行结束时开始)接近 3000 毫秒的某个时间点触发。如果此时该事件想要触发(从现在开始大约 3000 毫秒)其他代码正在执行(可能是上面的 [click])，那么这个 fn 将被放在队列的末尾。
现在回到我们原来的运行代码，[click] 在队列中，代码进一步运行。现在我们运行的代码更改了 DOM 中某些元素的样式属性并添加了边框。当浏览器刷新 UI 时，必须完成此更改。它不会立即可见，因为 JS 正在运行一些其他代码，因此在单击后添加，因此队列现在看起来像这样:
[点击] [UI 刷新 - 它可能会改变边框等]
所以现在队列包含两个事件，当当前运行的 JS 结束时要调用。它会调用 [click] 并且用户仍然看不到我们之前代码请求的边框变化。单击完成后，队列中的下一个事件将跳入其中，即 UI 刷新。它可能会做一大堆绘图，包括我们在早期代码运行时请求的边框更改。
如果在执行点击事件或当 UI 更改显示并重绘屏幕时我们安排的计时器触发，fn 将被添加到队列并尽快执行尽可能。
我的理解对吗？如果有人可以澄清我是否误解了某些内容并解释我错在哪里，那就太好了。一旦我澄清了这一点，我会将这个问题扩展到 setTimeout(fn,0) 技巧，因为这让我更加困惑。
最佳答案
关于事件循环的工作方式，你是正确的。这是一个单线程环境，您有一堆计划执行的任务(或函数)以及执行它们的循环。
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 调用的响应和运行时只是让它发生。
这也很糟糕，因为你无法真正暂停和安排哪个 Action 发生在哪个 Action 之后:一旦一个任务开始执行，它必须在下一个任务开始之前执行到结束。
如果我们没有同时发生很多事情，这不是问题:
[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)
})
现在你有一堆小任务，而不是一个大任务。
附言这是 setTimeout(fn,0) 的唯一合法用途。
关于javascript - 计时器如何在 Javascript 中工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18839135/