- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我不太明白定时器在 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
,有一个暂停,在此期间可以完成其他事情,然后响应到达并执行你的回调。然后它可以发出其他请求,这些请求有自己的回调等。
所有这些(事件循环)都由运行时处理。这有好的一面也有坏的一面:它很好,因为你不需要处理线程进程等——你只需要指定你想要发生的事情,比如,你收到你的 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/
我需要在 文档就绪 触发后 5 秒调用我的函数 abc()。 这在 jQuery 中可能吗? $(document).ready(function () { //Wait 5 seconds then
我发现 System.Diagnostics.Stopwatch 类即使在很短的时间段(即 20 秒)内似乎也存在可测量的不准确性。对于编码为运行 20 秒的进程,我的进程显示耗时为 20.3+ 秒:
我正在使用 Ionic Framework 使用 Angular 构建一个 Android/iPhone 食谱应用程序。 功能之一应该是每个成分/步骤的警报/计时器。 我猜 Ionic 是基于 Apa
我有一个 JS 计时器脚本,从 20 秒开始倒计时 var count = 0; var speed = 1000; countdown = setInterval( function
我的 JavaScript 计时器有一个大问题。一切正常,除了 1 个按钮:停止!我不知道如何停止计数器上的所有内容(例如重置每个输入和计数器)。有什么想法可以解决这个问题吗?
所以我有一个 TimerTask 任务 在其 run() 中调用函数 onTimerComplete() onTimerComplete() 看起来像这样: private void onTimerC
我在 Eclipse 中的 windowbuilder 创建的 run() 方法中有计时器。 我不知道如何通过另一种方法停止该计时器。例如通过添加 if(MenuWindow.gameStarted
我对java很陌生,我试图在按下按钮时启动计时器,但无法启动它。我尝试了几行代码,但似乎没有任何效果。 我已经声明了我的标签、文本字段和计时器: private JTextField JTFHours
import java.util.Scanner; import java.util.Timer; import java.util.TimerTask; public class Boggle {
我正在尝试在 JavaScript 中获取计时器的值,因此当计时器为零时它会显示不同的内容; var local_t = new Date(); local_t.setSeconds(local_t.
我需要使用 jquery 为网站创建自定义 slider 。到目前为止,如果我单击按钮,我已经设法让它按照我想要的方式运行,但我想实现一个自动计时器,以便幻灯片在 5 秒后切换。 这是我的 JS 代码
我正在制作一个计时器,记录点击“通过”按钮上的“确定”时的最长时间(个人最好成绩)。我似乎无法弄清楚如何让计数器回到 0,我确信有一种方法可以只用 2 个按钮(开始 + 通过)来完成。我希望计时器在我
我有一个 java.util.Timer 用于限制电子邮件发送(如果最近发送了状态电子邮件,那么现在不要发送,而是创建一个计时器任务以稍后发送任何新状态)。 我想要的是确保最终发送所有排队的电子邮件,
我已经建立了一个在线考试门户,允许学生使用网络浏览器在线参加考试。 现在我还开发了计时器功能,用户必须在规定的时间范围内完成考试。我遇到的麻烦是,当我刷新页面时,计时器再次从新开始,例如 40 分钟。
我想知道在一定时间内禁用按钮的最佳方法是什么。当用户使用其他按钮转到其他页面时,定时器不会被重置,按钮仍将被禁用。 我读过很多关于异步任务、线程的不同方法。但是我非常不确定哪种方法最好。 我希望计时器
我正在制作一个测验应用程序,我想在其中显示用户在玩游戏时所用的时间。它应该采用 HH:MM:SS 格式,从 00:00:00 开始,直到他选择答案。当用户每秒播放时,计时器应该每秒更新一次。另外,我想
您好,计划为该 Activity 开发 android 倒数计时器应用程序,当用户单击开始按钮时显示计时器倒计时并显示计时器倒计时,用户将转到剩余 Activity ,即使计时器在后台运行,如果用户单
我想知道是否有一种简单的方法可以使用 PHP 在数据库中创建计时器,我想在数据库中创建该行 30 分钟后将其删除。如果这不够具体,我很抱歉,但我不知道如何在其中提供更多细节,请随意发表评论,以便我可以
我试图制作一种与我的计时器一起使用的对象。问题是,当我只有裸函数(不在对象中)时,它就可以工作。但是当我把它放在对象内部时它不起作用。 使用此代码我只能看到 00:01 当我只使用函数本身时,它工作正
这个问题已经有答案了: How to format numbers as currency strings (67 个回答) 已关闭 9 年前。 我想显示从 1 到 2500 的美元计时器。当计时器增
我是一名优秀的程序员,十分优秀!