Javascript 如何避免js setInterval（）函数首次启动时的延迟

请看一下下面的代码，让我知道如何避免第一次倒计时时的延迟

正如您所见，计数器工作正常，但首次启动时有延迟

var-sec=20；
var timer=setInterval（函数（）{
$（“#框”）。文本（第-）；
如果（秒==-1）{
$（'#box'）.css（'color'，'blue'）；
清除间隔（计时器）；
} 
}, 1000);

20
使用
--sec
而不是
sec--
，以便设置更改后的值

这里详细描述了这项工作的原因：

因此，您的代码应该如下所示：


var-sec=20；
var timer=setInterval（函数（）{
$（“#框”）.text（--sec）；
如果（秒==-1）{
$（'#box'）.css（'color'，'blue'）；
清除间隔（计时器）；
} 
}, 1000);

20
将回调放在一个单独的函数中，并在
setInterval（）之后/之前立即调用它
另一个选项-将代码段移动到单独的功能

var sec = 20;
var execution = function() {
   $('#box').text(sec--);
   if (sec == -1) {
      $('#box').css('color','blue');
      clearInterval(timer);
   } 

}

execution(); // Run first time without delay

var timer = setInterval(function() { 
    execution(); // every next run should be done with delay
}, 1000);

要回答您的问题，请使用函数表达式，而不是匿名函数。这将允许您在代码中的任何位置调用该函数

挖掘更深一点：而不是StStalk，考虑<强> SETTIMEOUT。当事情变得艰难时（导致一些有趣的结果），间隔可以排队，超时则不会。有关更多信息，请参阅
超时设置（请参阅下面代码段中的比较）：

如果您在现代浏览器中追求准确性，请使用requestAnimationFrame


/**
好的：间隔时间
**/
var secs_i=20，
onInterval=函数（）{
log（secs_i，“Interval”）；
如果（秒）{
//在此完成之前先做一些事情（~1x/秒，可能会排队并快速连续运行）
}否则{
返回clearInterval（间隔）；
//完成后在这里做事
}
},
间隔=设置间隔（onInterval，1000）；
onInterval（）；
/**
更好：超时
**/
var secs_t=20，
onTimeout=函数（）{
log（secs_t，“Timeout”）；
如果（秒）{
//在此完成之前先做一些事情（每秒约1次）
超时=设置超时（onTimeout，1000）；
}否则{
//完成后在这里做事
}
}，超时；
onTimeout（）；
/**
最佳：动画帧（IE9+其他所有内容）
**/
var secs_a=20，
onAnimationFrame=函数（）{
时间=秒（window.performance.now（）-init）/1000；
log（time.toFixed（2），“动画帧”）；
如果（时间>0）{
//在这里完成之前做一些事情（每秒约60次）
af=window.requestAnimationFrame（onAnimationFrame）；
}否则{
//完成后在这里做事
}
}，af，init=window.performance.now（），时间；
onAnimationFrame（）
console.log=function（log，id）{$（'h1[data id=“'+id+''”）.text（log）；}；h1:before{content:attr（data id）“：”；}
我不明白这将如何解决问题？你能解释一下吗？嗨，弗里迪，谢谢，但你能告诉我这里的魔力是什么吗？
--sec
真的起作用了吗？@Zee OPs代码将需要两次定时器来第一次减小变量-因此延迟。这将在第一次传递时递减以消除该延迟。请参见此处运算符位置差异的说明：本质上，
秒--
将计算表达式，然后减小值，而
--秒--/code>将减小值，然后计算表达式。
var secs = 20,
onTimeout = function() { // a function expression
  console.log(secs);
  if (secs--) {
    // do things before complete here (~1x per sec)
    timeout = setTimeout(onTimeout, 1000);
  } else {
    // do things after complete here
  }
}, timeout;
onTimeout();