关于setInterval()你所不知道的地方

前言：1.使用setInterval()的定时器会把事件运行的时间也包含在内，如果要精确算定时两个任务之间的时间，可以使用setTimeout()替换。2.当异步事件发生时，如mouse click, a timer firing, or an 代码执行完成。

1. setInterval()基础

setInterval函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。

<input type="button" onclick="clearInterval(timer)" value="stop"><script> var i = 1 var timer = setInterval(function() {  console.log(2); }, 1000);</script>

上面代码表示每隔1000毫秒就输出一个2，直到用户点击了停止按钮。

与setTimeout一样，除了前两个参数，setInterval 方法还可以接受更多的参数，它们会传入回调函数，下面是一个例子。

function f(){ for (var i=0;i<arguments.length;i++){  console.log(arguments[i]); }}setInterval(f, 1000, "Hello World");// Hello World// Hello World// Hello World// ...

如果网页不在浏览器的当前窗口（或tab），许多浏览器限制setInteral指定的反复运行的任务最多每秒执行一次。

setInterval指定的是“开始执行”之间的间隔，并不考虑每次任务执行本身所消耗的事件。因此实际上，两次执行之间的间隔会小于指定的时间。比如，setInterval指定每100ms执行一次，每次执行需要5ms，那么第一次执行结束后95毫秒，第二次执行就会开始。如果某次执行耗时特别长，比如需要105毫秒，那么它结束后，下一次执行就会立即开始。

var i = 1;var timer = setInterval(function() { alert(i++);}, 2000);

上面代码每隔2000毫秒，就跳出一个alert对话框。如果用户一直不点击“确定”，整个浏览器就处于“堵塞”状态，后面的执行就一直无法触发，将会累积起来。举例来说，第一次跳出alert对话框后，用户过了6000毫秒才点击“确定”，那么第二次、第三次、第四次执行将累积起来，它们之间不会再有等待间隔。

为了确保两次执行之间有固定的间隔，可以不用setInterval，而是每次执行结束后，使用setTimeout指定下一次执行的具体时间。上面代码用setTimeout，可以改写如下。

var i = 1;var timer = setTimeout(function() { alert(i++); timer = setTimeout(arguments.callee, 2000);}, 2000);

上面代码可以确保两次执行的间隔是2000毫秒。

根据这种思路，可以自己部署一个函数，实现间隔时间确定的setInterval的效果。

function interval(func, wait){ var interv = function(){  func.call(null);  setTimeout(interv, wait); }; setTimeout(interv, wait);}interval(function(){ console.log(2);},1000);

上面代码部署了一个interval函数，用循环调用setTimeout模拟了setInterval。

html 5标准规定，setInterval的最短间隔时间是10毫秒，也就是说，小于10毫秒的时间间隔会被调整到10毫秒。

2. setInterval运行机制

setInterval的运行机制是，将指定的代码移出本次执行，等到下一轮Event Loop时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮Event Loop时重新判断。这意味着，setTimeout指定的代码，必须等到本次执行的所有代码都执行完，才会执行。

每一轮Event Loop时，都会将“任务队列”中需要执行的任务，一次执行完。setTimeout和setInterval都是把任务添加到“任务队列”的尾部。因此，它们实际上要等到当前脚本的所有同步任务执行完，然后再等到本次Event Loop的“任务队列”的所有任务执行完，才会开始执行。由于前面的任务到底需要多少时间执行完，是不确定的，所以没有办法保证，setTimeout和setInterval指定的任务，一定会按照预定时间执行。

这一点对于setInterval影响尤其大。

setInterval(function(){ console.log(2);},1000);(function (){ sleeping(3000);})();

上面的第一行语句要求每隔1000毫秒，就输出一个2。但是，第二行语句需要3000毫秒才能完成，请问会发生什么结果？

结果就是等到第二行语句运行完成以后，立刻连续输出三个2，然后开始每隔1000毫秒，输出一个2。也就是说，setIntervel具有累积效应，如果某个操作特别耗时，超过了setInterval的时间间隔，排在后面的操作会被累积起来，然后在很短的时间内连续触发，这可能或造成性能问题（比如集中发出ajax请求）。

为了进一步理解javascript的单线程模型，请看下面这段伪代码。

function init(){ { 耗时5ms的某个操作 } 触发mouseClickEvent事件 { 耗时5ms的某个操作 } setInterval(timerTask,10); { 耗时5ms的某个操作 }}function handleMouseClick(){ 耗时8ms的某个操作}function timerTask(){ 耗时2ms的某个操作}init();

请问调用init函数后，这段代码的运行顺序是怎样的？

0-15ms：运行init函数。

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：关于setInterval()你所不知道的地方

关键词：