JavaScript 中 setTimeout 和 setInterval 的区别详解以及相互模拟实现

一、setTimeout 和 setInterval 的区别

setTimeout() 定义和用法：

定义：setTimeout()方法用于在指定毫秒数后再调用函数或者计算表达式（以毫秒为单位）

语法：

setTimeout(code,millisec)

参数：code必需，要调用的函数后要执行的 JavaScript 代码串；millisec必需，在执行代码前需等待的毫秒数。

说明：setTimeout() 只执行函数一次，如果需要多次调用可以使用 setInterval()，或者在函数体内再次调用setTimeout()

示例代码：延迟1秒弹出 Hello

// 延迟1秒弹出 Hello
setTimeout(function(){ 
  alert("Hello");
}, 1000);

setInterval() 定义和用法：

定义：setInterval() 方法用于按照指定的周期（以毫秒计）来循环调用函数或计算表达式，直到 clearInterval() 被调用或窗口关闭，由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法：

setInterval(code,millisec[,"lang"])

参数：code必需，要调用的函数或要执行的JavaScript 代码串；millisec必须，周期性执行或调用 code 之间的时间间隔，以毫秒计。

说明：setInterval() 会不停的调用函数，直到clearInterval() 被调用或者窗口被关闭，由 setInterval() 返回的ID值可用作 clearInterval() 方法的参数。

示例代码：一直显示当前时间，点击停止不继续

<p>显示当前时间:</p>
<p id="demo"></p>
<button onclick="myStopFunction()">停止时间</button>
<!-- 一直显示当前时间，点击停止不继续 -->
<script>
var myVar = setInterval(function(){ myTimer() }, 1000);

function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
}

function myStopFunction() {
    clearInterval(myVar);
}
</script>

区别总结：

setTimeout() 方法只运行一次，也就是说当达到设定的时间后就开始运行指定的代码，运行完后就结束了，次数是一次。

setInterval() 是循环执行的，即每达到指定的时间间隔就执行相应的函数或者表达式，只要窗口不关闭或 clearInterval() 调用就会无限循环下去。

二、知识储备

1、浏览器是个多进程应用
首先你要知道 浏览器是个多进程应用，那这些进程里都包含哪些：

• Browser进程：浏览器的主进程（负责协调、主控），只有一个，作用：
  • 负责浏览器界面显示，与用户交互。如前进，后退等
  • 负责各个页面的管理，创建和销毁其他进程
  • 将Renderer进程得到的内存中的Bitmap，绘制到用户界面上
  • 网络资源的管理，下载等
• 第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建
• GPU进程：最多一个，用于3D绘制等
• 浏览器内核（浏览器渲染进程，它内部是多线程的）：默认每个Tab页面一个进程，互不影响。主要作用为

2、浏览器内核中的多线程

• GUI渲染线程
• JS引擎线程：负责解析Javascript脚本，运行代码。
• 事件触发线程：归属于浏览器而不是JS引擎，用来控制事件循环（可以理解，JS引擎自己都忙不过来，需要浏览器另开线程协助）
  当JS引擎执行代码块如setTimeOut时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中。
  由于JS的单线程关系，所以这些待处理队列中的事件都得排队等待JS引擎处理（当JS引擎空闲时才会去执行）
• 定时触发器线程：因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确。计时完毕后，添加到事件队列中，等待JS引擎空闲后执行。
• 异步http请求线程

三、setInterval缺点

定时器指定的时间间隔，表示的是何时将定时器的代码添加到消息队列，而不是何时执行代码。所以真正何时执行代码的时间是不能保证的，取决于何时被主线程的事件循环取到，并执行。

setInterval(function, N)  
//即：每隔N秒把function事件推到消息队列中

上图可见，setInterval每隔100ms往队列中添加一个事件；100ms后，添加T1定时器代码至队列中，主线程中还有任务在执行，所以等待，some event执行结束后执行T1定时器代码；又过了100ms，T2定时器被添加到队列中，主线程还在执行T1代码，所以等待；又过了100ms，理论上又要往队列里推一个定时器代码，但由于此时T2还在队列中，所以T3不会被添加，结果就是此时被跳过；这里我们可以看到，T1定时器执行结束后马上执行了T2代码，所以并没有达到定时器的效果。

综上所述，setInterval有两个缺点：

• 使用setInterval时，某些间隔会被跳过；即使setInterval调用的方法报错了，他仍然会继续执行。
• 无视网络延迟，可能多个定时器会连续执行；

可以这么理解：每个setTimeout产生的任务会直接push到任务队列中；而setInterval在每次把任务push到任务队列前，都要进行一下判断(看上次的任务是否仍在队列中)。

因而我们一般用 setTimeout 模拟 setInterval，来规避掉上面的缺点。

模拟 setInterval() ：

将 setTimeout() 包含在一个执行函数A中，而setTimeout() 自己的code执行函数又是A，然后在函数A外将函数A执行一次，即达到了循环执行的目的。

setTimeout(function () {
    // 任务
    setTimeout(arguments.callee, 1000);
}, 1000)

上述函数每次执行的时候都会创建一个新的定时器，第二个 setTimeout 使用了 arguments.callee() 获取当前函数的引用，并且为其设置另一个定时器。

好处：

• 在前一个定时器执行完前，不会向队列插入新的定时器（解决缺点一）
• 保证定时器间隔（解决缺点二）

示例代码：

var intervalNum = 0;
function testsetInterval() {
    var date = new Date();
    console.log(date.getSeconds());
    console.log("setInterval", intervalNum++);
}
function recursive() {
    testsetInterval();
    setTimeout(function () {
        recursive()      //递归，每隔4秒调用一次recursive()
    }, 4000)
}
function testFuntion() {
    recursive();        //在方法recursive外，调用一次recursive,以启动循环调用！
}

实现循环执行，和 setInterval() 功能相同。

当然也可以用 setInterval() 来模拟 setTimeout() ，具体使用那个，以具体的需求和场景具体分析，就像for循环可以模拟所有的循环一样(包括分支，以及do while一样)。一般情况下 setTimeout() 用于延迟执行某方法或功能；setInterval() 则一般用于刷新表单，对于一些表单的假实时指定时间刷新同步。

模拟 setTimeout() ：

用 setInterval() 模拟 setTimeout() 很简单，在 setInterval() 执行一次后，立刻关闭窗口(当然这是耍无赖)或者执行 clearInterval() 方法(这个靠谱点)。clearInterval() 需要在 setInterval()执行code方法内或其他地方执行，不能紧接着 setInterval() 后面执行，那样setInterval() 还没等到执行，就已经被干掉了。

示例代码：

var intervalNum = 0, clearId = 0;
function testsetInterval(){
    var date = new Date();
    console.log(date.getSeconds());
    console.log("setInterval", intervalNum++);
    clearInterval(clearId);     //也可以在此执行
}
function testFuntion() {
    clearId = setInterval(function () {
        testsetInterval();          //每隔4秒调用testsetInterval()
        // clearInterval(clearId);     //可以在此执行
    },4000);
}

执行一次，关闭 setInterval()，和 setTimeout() 功能相同

最后，解释为什么 “ 建议传入函数而不是字符串以作为第一个参数”。 

setTimeout()、setInterval() 允许传入一个JS代码字符串并执行，然而在JS代码中执行另一段JS代码时，代码首先会以正常的方式求值，然后在执行过程中对包含于字符串中的代码发起另一个求值运算，从而造成双重求值。它比直接包含的代码执行速度慢很多，原因在于， 每次调用setTimeout()、setInterval() 都会创建一个新的解释器/编译器实例。这必然使得代码执行速度变慢，效率降低，从而造成性能的浪费。所以建议传入函数而不是字符串来作为第一个参数。

实例

下面写了一个小例子：点击 start 开始旋转，点击 stop 停止旋转。 

先是用 setInterval() 实现的：

<div class="divOne">
    123
  </div>
  <button id="click">start</button>
  <button id="stop">stop</button>
  <script src="./js/jquery-1.8.3.min.js"></script>
  <script src="./js/jquery.rotate.min.js"></script>
  <script>
    var angle = 0;
    var myVar;
    $('#click').on('click', function(){
      myVar = setInterval(function(){ myTimer() }, 10);
    })
    function myTimer() {
        angle += 3;
        $('.divOne').rotate(angle);
    }
    $("#stop").on('click', function(){
      clearInterval(myVar)
    })
   </script>

然后用 setTimeout 来模拟 setInterval 实现：

    var angle = 0;
    $('#click').on('click', function(){
      setTimeout(myTimer, 10)
    })
    var myTimer = function() {
      setTimeout(myTimer, 10)
      angle += 3;
      $('.divOne').rotate(angle);
    }
    $("#stop").on('click', function(){
      console.log(111)
      myTimer = null;
    })

// 或者

    var angle = 0;
    var stop = false;
    $('#click').on('click', function(){
      stop = false;
      setTimeout(function () {
        angle += 3;
        $('.divOne').rotate(angle);
        var myTimer = setTimeout(arguments.callee, 10); 
        if( stop ){//符合条件 删除定时器
          clearTimeout(myTimer);
        }    
      }, 10);
    })
    $("#stop").on('click', function(){
      console.log(111)
      stop = true;
    })