Skip to main content
 首页 » 编程设计

Javascript 调度: setTimeout and setInterval

2022年07月19日167虾米姐

Javascript 调度: setTimeout and setInterval

我们可能决定不立刻执行一个函数，而是某时间之后执行，一般我们称为“调度执行”。
有两种方法可以实现：

  • setTimeOut指某时间间隔之后执行一次函数。
  • setInterval指安装一定时间间隔有规律执行函数。

这些函数不是Javascript规范的一部分，但是大多数环境有内部调度并提供了这些方法。特别是，所有浏览器和Node.Js都支持。

setTimeout

语法：

let timerId = setTimeout(func|code, delay[, arg1, arg2...])

参数

func|code
被执行的函数或代码字符串，通常是函数，因为历史原因，代码字符串被允许，但不建议使用。

delay
运行之前的时间数，毫秒为单位。

arg1,arg2...
被执行函数的参数(IE9以下不支持)

举例，下面代码1秒之后执行sayHi()

function sayHi() { 
  alert('Hello'); 
} 
 
setTimeout(sayHi, 1000);

带参数情况：

function sayHi(phrase, who) { 
  alert( phrase + ', ' + who ); 
} 
 
setTimeout(sayHi, 1000, "Hello", "John"); // Hello, John

如果第一个参数是字符串，那么Javascript为之创建一个函数，所以，下面代码也正常运行：

setTimeout("alert('Hello')", 1000);

但不建议使用字符串，使用函数代替，如下：

setTimeout(() => alert('Hello'), 1000);

传递函数，但不运行

注意，开发者有时错误地在函数名称后面增加括号：

// wrong! 
setTimeout(sayHi(), 1000);

这个代码不能正常执行，因为setTimeout希望参数为函数引用，这里是sayHi()是函数的执行返回值，即表达式的执行结果传递给函数。这里sayHi()返回值为undefined(函数返回值为空),所以没有啥需要调度。

使用clearTimeout取消调度

调用setTimeout返回一个“timer标识符”timerId,我们使用使用其取消调度执行，语法为：

let timerId = setTimeout(...); 
clearTimeout(timerId);

下面代码中，我们调度函数，然后取消调度，所以结果什么都没有发生：

let timerId = setTimeout(() => alert("never happens"), 1000); 
alert(timerId); // timer identifier 
 
clearTimeout(timerId); 
alert(timerId); // same identifier (doesn't become null after canceling)

我们能看到alter输出，在浏览器中时间标识符为数字，其他环境可能为其他值，如NodeJS中返回时间对象，并带有额外的方法。

因为没有统一的规范，所以也没有问题。

对浏览器，timer在html5中描述了规范。

setInterval

方法setInterval语法与setTimeout一致：

let timerId = setInterval(func|code, delay[, arg1, arg2...])

所有参数意思相同，但与setTimeout不同的是，其运行函数不只一次，而是有规律地根据某个时间间隔运行。

为了停止运行，可以调用clearInterval(timerId)。
下面示例每个2秒显示消息，5秒过后，输出停止：

// repeat with the interval of 2 seconds 
let timerId = setInterval(() => alert('tick'), 2000); 
 
// after 5 seconds stop 
setTimeout(() => { clearInterval(timerId); alert('stop'); }, 5000);

Chrome/Opera/Safari中模态窗口冻结时间

在ie或firefox浏览器中，当显示alert/confirm/prompt时，内部时钟继续计时，但是在Chrome/Opera/Safari中内部时钟却冻结。

所以如果你运行上面代码，不关闭alter窗口一段时间，那么Firefox/IE 下面一个alert将立即显示(因为前面的执行也在计时)，而Chrome/Opera/Safari则超过2秒才执行后面代码（因为alert出现时，内部计时冻结）。

递归setTimeout

两种方式可以定期运行函数，一种是setInterval，另一种是递归执行setTimeout，如下：

/** instead of: 
let timerId = setInterval(() => alert('tick'), 2000); 
*/ 
 
let timerId = setTimeout(function tick() { 
  alert('tick'); 
  timerId = setTimeout(tick, 2000); // (*) 
}, 2000);

上面代码中setTimeout调度下一次调用正好是当前调用的最后一行（*号行）。

递归setTimeout方式比setInterval更灵活，因为其可以根据当前执行结果，让下次有不同的调度。

举例，我们需要写一个服务，没5秒发送一次请求至服务器请求数据，但如果服务器超负荷，应该增加间隔时间至10，20，40秒…，看下面伪代码：

let delay = 5000; 
 
let timerId = setTimeout(function request() { 
  ...send request... 
 
  if (request failed due to server overload) { 
    // increase the interval to the next run 
    delay *= 2; 
  } 
 
  timerId = setTimeout(tick, delay); 
 
}, delay);

如果需要定期执行耗CPU任务，我们可以衡量执行花费时长，然后计划下次执行。使用setTimeout递归方式可以改变两次执行时间间隔，setInterval不能做到。让我们比较两段代码，第一段使用setInterval：

let i = 1; 
setInterval(function() { 
  func(i); 
}, 100);

第二段使用setTimeout递归：

let i = 1; 
setTimeout(function run() { 
  func(i); 
  setTimeout(run, 100); 
}, 100);

对setInterval内部执行将每100ms运行func(i)一次：

你注意到了吗？

对Interval方式的func函数调度实际间隔时间少于100毫秒！

显然，因为执行func本身需要消费一部分间隔时间。可能func执行时间长于我们预期时间，甚至超过100号秒。

如果不超过100毫秒，引擎等待func执行完成，然后检查调度，如果时间到了，立刻再次运行。另一种情况，函数执行总是超过间隔时间，那么函数将根本没有暂停立刻执行。

下图是递归setTimeout方式运行图：

递归setTimeout方式确保固定时间间隔

因为新的调用被计划在前一个执行之后。

垃圾回收
当函数被传递给setInterval/setTimeout，有一个内部引用被创建指向它并保留在调度中，其阻止函数被垃圾回收，即使没有其他引用指向它。

// the function stays in memory until the scheduler calls it 
setTimeout(function() {...}, 100);

对于setInterval，函数一直驻留内存，直到cancelInterval被调用。这样有些副作用，函数引用外部词法环境，所以一直激活，外部变量也是。因此需要比函数自身消耗的内存更多。所以，当我们不需要调度函数时，最好取消它，即使其很小。

setTimeout(…,0)

有个特别的用途：setTimeout(func,0),调度函数func尽可能快地执行，但调度将在当前代码完成之后执行。

所以函数调度正是运行在当前代码之后，也就是说，异步执行，下面示例先输出“hello”，然后立刻输出“World”。

setTimeout(() => alert("World"), 0); 
 
alert("Hello");

第一行代码设置调用为0ms之后，但是调度仅在当前代码完成之后开始检查时钟，所以“hello”先输出，然后是“world”。

分割耗CPU任务

巧妙使用setTimeout可以分割耗CPU任务。举例，语法高亮脚本（通常给某页一些示例代码颜色化）是相对耗CPU的任务。为了高亮代码，需要执行分析，创建很多演示元素，并增加他们至页面文档中，对大量文本来说，需要很长时间，这可能引起浏览器挂起，用户无法接受。

所以我们能分割长文本为多个块，首先第一个100行，然后使用setTimeout(...,0)计划另一个100行,一直往复。

为了描述清除，我们举个简单的示例，有个函数需要计数，从1到1000000000。

如果你直接运行，cpu将挂起，对服务器段脚本也是很明显，如果你运行在浏览器段，试图点击页面上的其他按钮，会发现整个Javascript完全停滞，我都知道代码执行完成才会有反应。

let i = 0; 
 
let start = Date.now(); 
 
function count() { 
 
  // do a heavy job 
  for(let j = 0; j < 1e9; j++) { 
    i++; 
  } 
 
  alert("Done in " + (Date.now() - start) + 'ms'); 
} 
 
count();

浏览器可能会显示“脚本耗时太长”警告（希望没有，数字并不是很大）。让我们分割任务，使用嵌套的setTimeout：

let i = 0; 
 
let start = Date.now(); 
 
function count() { 
 
  // do a piece of the heavy job (*) 
  do { 
    i++; 
  } while (i % 1e6 != 0); 
 
  if (i == 1e9) { 
    alert("Done in " + (Date.now() - start) + 'ms'); 
  } else { 
    setTimeout(count, 0); // schedule the new call (**) 
  } 
 
} 
 
count();

现在浏览器ui在“count”执行过程中功能正常。我们主要做了几部分工作：

  1. 首先运行 ： 1…1000000.
  2. 第二次运行: 1000001…2000000.
  3. …往复运行,如果while检查i正好能被1000000整除。

如果还没有完成，下一个调用被调度（*号行）

count之间的暂停执行让Javascript引擎有了喘息时间，正好可以执行其他任务，用于响应用户动作。

值得注意的是：两种方式：采用和不采用setInterval分割任务，在速度上有比较，整个计数时间没有差异。

为了说明更清楚，让我们改进示例,我们把调度代码移动到count的开始处：

let i = 0; 
 
let start = Date.now(); 
 
function count() { 
 
  // move the scheduling at the beginning 
  if (i < 1e9 - 1e6) { 
    setTimeout(count, 0); // schedule the new call 
  } 
 
  do { 
    i++; 
  } while (i % 1e6 != 0); 
 
  if (i == 1e9) { 
    alert("Done in " + (Date.now() - start) + 'ms'); 
  } 
 
} 
 
count();

现在，当我们开始count时，发现需要更多的count，在执行任务之前调度立刻执行。
如果你运行程序，很容易发现耗时减少。

浏览器内置定时器最小延迟

浏览器中，对内置时钟运行的频率有限制，HTML5标准描述：5个嵌套时钟之后。。。间隔被迫需要4毫秒。

下面示例演示说明，setTimeout被调度0ms后开始运行，每次调用记录实际运行时间，我们看看延迟情况：

let start = Date.now(); 
let times = []; 
 
setTimeout(function run() { 
  times.push(Date.now() - start); // remember delay from the previous call 
 
  if (start + 100 < Date.now()) alert(times); // show the delays after 100ms 
  else setTimeout(run, 0); // else re-schedule 
}, 0); 
 
// an example of the output: 
// 1,1,1,1,9,15,20,24,30,35,40,45,50,55,59,64,70,75,80,85,90,95,100

第一次时钟立刻运行，然后延迟变成了如我们看到的9，15，20，24。。。和规范中写的一致。

这种限制来自旧版本,许多脚本依赖它,因为历史原因而存在。

服务器段Javascript，没有这样的限制，也有其他方式调度立刻执行的异步任务，如process.nextTick 和 setImmediate 在 Node.js中。因此只有浏览器才有这样概念。

浏览器渲染过程

因为浏览器通常脚本执行完成后，全部渲染给用户，利用延迟技术可以给用户显示精度条或其他方式的过程。

我们有一个巨大的函数，其改变某对象，改变直到执行完成才反应出来。示例如下：

<div id="progress"></div> 
 
<script> 
  let i = 0; 
 
  function count() { 
    for(let j = 0; j < 1e6; j++) { 
      i++; 
      // put the current i into the <div> 
      // (we'll talk more about innerHTML in the specific chapter, should be obvious here) 
      progress.innerHTML = i; 
    } 
  } 
 
  count(); 
</script>

如果你运行代码，i的值是在整个代码执行完成后才显示。

如果我们使用setTimeout去分割代码，修改值被分配至每个片段中，效果更好：

<div id="progress"></div> 
 
<script> 
  let i = 0; 
 
  function count() { 
 
    // do a piece of the heavy job (*) 
    do { 
      i++; 
      progress.innerHTML = i; 
    } while (i % 1e3 != 0); 
 
    if (i < 1e9) { 
      setTimeout(count, 0); 
    } 
 
  } 
 
  count(); 
</script>

现在div中的值不断在增长。

总结

  • 两个方法 setInterval(func, delay, ...args)和 setTimeout(func, delay, ...args)都可以实现定时运行函数。
  • 取消调度执行，可以调用 clearInterval/clearTimeout ，使用 setInterval/setTimeout函数的返回值.
  • 嵌套 setTimeout调用比 setInterval更灵活. 也能保证执行之间的最小时间（异步方式）.
  • 零时间调度setTimeout(...,0)用于调度执行 “尽可能短, 但必须在当前代码执行完成之后”.

使用 setTimeout(...,0)的场景有:

  • 分割耗时CPU任务至多个片段，避免执行代码时程序挂起。
  • 为在执行任务的同时，让浏览器可以执行其他任务(绘制进度条).

注意，所有调度方法不能保证精确的延迟时间，我们不能依赖调度代码实现。

举例，浏览器内置时钟慢可能有许多原因：

  • CPU超负荷.
  • 浏览器 tab 是后台模式.
  • 笔记本电脑电池.

所有可能降低最小计时器方案(最小延迟)300毫秒甚至1000 ms取决于浏览器和设置。


本文参考链接：https://blog.csdn.net/neweastsun/article/details/73843584
  文章来源：
  https://www.itguest.com/post/agha2b1.html
阅读延展