[知识总结] 再聊 setTimeout 与 setInterval

[QuocVi1994]

setTimeout 与 setInterval，在工作项目中经常会用到，比如防抖、节流，或者在处理异步场景时；最近笔者面试遇到一个问题，让我重新思考对这两个方法的理解:

// sleep 函数
function block(millis) {
    let date = new Date();
    let curDate = null;
    do { curDate = new Date(); }
    while(curDate-date < millis);
}

// 1.
setInterval(() => {
    block(100) // block(300)
}, 200);

// 2.
setTimeout(function foo(){
    block(100) // block(300)
    setTimeout(foo, 200);
}, 200);

问题:

• 分析 1、2，中 block 传入100的时候执行有何区别，传入300时执行有何区别？
• 2中当执行block 100时，它的实际执行情况是怎么样的？300呢？

[QuocVi1994]

实际上，方法2 是对 方法1的一种改造补充，也就是所谓的用链式setTimeout 替代 setInterval

[QuocVi1994]

引申问题， requestAnimationFrame 相比于 setTimeout 和 setInterval 好处是什么？

[QuocVi1994]

区别在于，setInterval 本身不会管 传入的function 情况，执行完就不管了，但是 方法2 做的是一个链式的调用，会存在依赖，在实际使用过程中，我们如果采用轮询的方法，最好可以采用方法2的方式。

其二就是，对于传入 setInterval ，当为100的时候，其执行阻塞时间看上去还是异步间隔 （事件循环存放stack 消费），但是当传入300时，因为超出了这个200时间，使用在表现上看着是同步的，虽然实际仍然是放到stack里面去执行消费。