setTimeout与setInterval的对比与互相实现

目录

• 1. 案例
• 2. setTimeout和setInterval对比
• 3. 互相实现
  • 3.1. 利用setTimeout实现setInterval
  • 3.2. 利用setInterval实现setTimeout

案例

---

setTimeout和setInterval对比

另外，根据网上一张关于此问题比较流行的图：

function click() { 
// code block1... 
setInterval(function() { 
// process ... 
}, 200); 
// code block2 
}

setInterval可能会存在的问题是：
假设onclick回调函数一共要300ms执行完, block1代码执行完花了5ms, 在5ms时执行setInterval, 以此为一个时间点, 在205ms时插入process代码。当onclick回调函数顺利结束, process代码开始执行(即图中的timer code), 然而process代码也执行了一个比较长的时间, 超过了接下来一个插入时间点405ms, 这样代码队列后又插入了一份process代码, process继续执行着, 而且超过了605ms这个插入时间点，下面问题来了，可能你还会认为代码队列后面又会继续插入一份process代码，但真实的情况是,由于代码队列中已经有了一份未执行的process代码(405ms的), 所以605ms这个插入时间点将会被跳过, 因为js引擎只允许有一份未执行的process代码。

---

互相实现

利用setTimeout实现setInterval

　　这个本文刚开始的案例就是一个例子，下面再给出一个：

function f(){
   console.log('setTimeout模拟setInterval，每秒钟打印一次');
   setTimeout(f, 1000);
}
setTimeout(f, 1000);

可以看到控制台每秒钟打印一次：

利用setInterval实现setTimeout

function f(){
   console.log('setInterval模拟setTimeout，只会打印一次，清除timer后停止');
   clearInterval(timer);
}
var timer = setInterval(f, 1000);

可以看到控制台只打印一次：