立即调用setTimeout [英] Call setTimeout without delay

问题描述

经常在JavaScript库中看到如下代码：

Quite often see in JavaScript libraries code like this:

setTimeout(function() {
    ...
}, 0);

我想知道为什么要使用这样的包装代码。

I would like to know why use such a wrapper code.

推荐答案

非常简化：

浏览器是单线程的，这个单线程（UI线程）是在渲染引擎和js引擎。

Browsers are single threaded and this single thread (The UI thread) is shared between the rendering engine and the js engine.

如果你想要做的事情需要很多时间（我们在这里讨论循环但仍然）它可能会停止（paus）渲染（流程和绘画）。

If the thing you want to do takes alot of time (we talking cycles here but still) it could halt (paus) the rendering (flow and paint).

在浏览器中还存在存储桶，其中所有事件首先被放入等待UI线程完成任何事情这样做。一旦线程完成，它就会在存储桶中查找并首先选择任务。

In browsers there also exists "The bucket" where all events are first put in wait for the UI thread to be done with whatever it´s doing. As soon as the thread is done it looks in the bucket and picks the task first in line.

使用 setTimeout 你在延迟之后在桶中创建一个新任务，让线程尽快处理它以进行更多的工作。

Using setTimeout you create a new task in the bucket after the delay and let the thread deal with it as soon as it´s available for more work.

一个故事：

延迟0 ms后，创建函数
的新任务并将其放入存储桶中。在那个确切的时刻，UI线程正在忙着
做其他事情，而且已经在
桶中有另外一个任务。 6毫秒之后，该线程可用并获得你的
你的任务，好，你接下来。但是什么？那是一件大事！它有
就像是foreeeeeever（30ms）!!

After 0 ms delay create a new task of the function and put it in the bucket. At that exact moment the UI thread is busy doing something else, and there is another tasks in the bucket already. After 6ms the thread is available and gets the task infront of yours, good, you´re next. But what? That was one huge thing! It has been like foreeeeeever (30ms)!!

最后，现在线程已经完成并且来了并获得你的
任务。

At last, now the thread is done with that and comes and gets your task.

大多数浏览器的最小延迟大于0，因此将0作为延迟意味着：尽快将此任务放入购物篮。但是告诉UA尽快将其放入存储桶并不能保证它会在那一刻执行。这个桶就像邮局一样，可能是因为有很长的其他任务。邮局也是单线程的，只有一个人帮助完成所有任务......抱歉客户完成任务。你的任务必须像其他人一样排在第一位。

Most browsers have a minimum delay that is more then 0 so putting 0 as delay means: Put this task in the basket ASAP. But telling the UA to put it in the bucket ASAP is no guarantee it will execute at that moment. The bucket is like the post office, it could be that there is a long queue of other tasks. Post offices are also single threaded with only one person helping all the task... sorry customers with their tasks. Your task has to get in the line as everyone else.

如果浏览器没有实现自己的自动收报机，它会使用操作系统的滴答周期。较旧的浏览器具有10-15ms之间的最小延迟。 HTML5 指定如果延迟较少然后4ms UA应该增加到4ms。这据说是在2010年及以后发布的浏览器中保持一致。

If the browser doesn´t implement its own ticker, it uses the tick cycles of the OS. Older browsers had minimum delays between 10-15ms. HTML5 specifies that if delay is less then 4ms the UA should increase it to 4ms. This is said to be consistent across browsers released in 2010 and onward.

请参阅 JavaScript定时器如何工作由John Resig提供更多详细信息。

See How JavaScript Timers Work by John Resig for more detail.

编辑：另请参阅来自JSConf EU 2014的Philip Roberts，对于事件循环究竟是什么？。这是所有触摸前端代码的人的强制性观看。

Also see What the heck is the event loop anyway? by Philip Roberts from JSConf EU 2014. This is mandatory viewing for all people touching front-end code.

这篇关于立即调用setTimeout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！