javascript - 将 clearInterval 停止排队间隔执行

标签 javascript clearinterval

假设我有这些

myInterval=setInterval(funcA,50);

function funcA(){
  //Some code that takes longer than 50ms to run
}

setTimeout(function(){clearInterval(myInterval);},10000}

假设 funcA 总是需要超过 50 毫秒才能使其变得简单。自然地,许多 funcA 运行将堆积起来并排队。 clearInterval 会删除那些排队的运行还是只是停止排队新的运行?

我做了一个 fiddle 来测试它,结果 clearInterval 停止了所有 future 的执行,即使是那些已经排队的。我只需要确认此行为是一致的(跨浏览器/平台)。

var myInterval=setInterval(funcA,20);

setTimeout(function(){
  clearInterval(myInterval);
  
  console.log('Clearing interval at ' + Date.now());
  
},400);

var lastRunTimeStamp=0;

function funcA(){
  while(Date.now()<lastRunTimeStamp+25){}
  lastRunTimeStamp=Date.now();
  console.log('Run at ' + lastRunTimeStamp);
}

--更新--

本题中的排队执行假设不正确,请检查T.J.克劳德回答解释。

最佳答案

Naturally, many funcA runs will pile up and be queued.

不,他们不会,因为重复计时器的工作方式。浏览器中的计时器行为(现在)由 WHAT-WG "HTML5" specification 指定.将下一个任务排队作为上一个任务的部分,在回调完成后完成,而不是与其分开; details here .因此,一次只有一个未完成的任务(在排队后,在 JavaScript 引擎可以拾取它并处理它之前)。

Will clearInterval remove those queued runs or just stop queuing new ones?

不*,但不是必须的。定时器系统排队任务的第一步是查看定时器是否仍在事件定时器列表中;如果不是,the task terminates在调用您的回调之前。所以它好像 clearInterval 删除了任务(例如,您之前排队的回调没有运行),但不是因为 clearInterval 清除了它(相反,这是因为任务已检查)。

测试和证明行为很容易:只需安排一个计时器,然后忙等待超过其间隔时间,然后清除它:

var counter = 0;
var timer = setInterval(function() {
  ++counter;
  console.log("timer fired:", counter);
  if (counter == 1) {
    setTimeout(busyWaitAndClear, 0);
  }
}, 500); // Every 500ms
function busyWaitAndClear() { // Obviously never really do this
  var done = Date.now() + 1000;
  while (done > Date.now()) {
    // wait
  }
  clearInterval(timer);
  console.log("timer cleared");
}

请注意,计时器只触发一次,不会触发第二次,即使在我们忙等待时可能至少有一个触发它的任务已排队。


*(“否”- description of clearInterval 没有说明任何有关读取待处理任务列表和删除按间隔排队但尚未提取的任务的信息。)

关于javascript - 将 clearInterval 停止排队间隔执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47263656/

相关文章:

javascript - clearInterval 不会停止 setInterval

javascript - 重置并重复设置间隔

javascript - clearInterval() 在按钮单击时不起作用

javascript - 从另一个 Stencil JS 库导入 Stencil JS 库

javascript - 如何使用 Javascript/Jquery/HTML5 函数将 HTML 页面捕获为图像

javascript - 使用 Javascript 捕获 react 时间,准确性问题

javascript - Amazon S3 视频无法以 HTML 格式运行

javascript - 清除所有数据并恢复默认设置