关于setInterval你不得不知道的事

在平时开发过程当中，倒计时或轮询是一个很常见的功能，当咱们须要一个倒计时功能时，咱们通常会优先想到setInterval。

以下：

function countDown(fn, wait, count) {
  let time = count || 5
  let interval = setInterval(() => {
    time--
    fn()
    if (time === 0) clearInterval(interval)
  }, wait)
}

let i = 0
countDown(() => {
  console.log(i++)
}, 1000)

复制代码

但其实setInterval存在着一些弊端，将会在某些状况下影响达到的效果。 一、setInterval无视网络延迟，只要达到时间，就会进行下一次调用。假设咱们在请求一个http接口，在上一次还未返回结果的状况下，继续发起请求，颇有可能的结果就是一次性获得屡次一样的结果。当http接口都报错的时候，可能同时出现屡次错误提示。或者屡次页面刷新的情况。 二、假设每100豪秒执行一次，若上次执行只花了5ms，则下次执行会在95ms之后。时间并不许确。 三、即便setInterval调用的方法报错了，他仍然会继续执行。

因此推荐的作法是使用setTimeout在进行模拟setInterval。 经过setTimeout递归调用进行模拟：

(function loop(){
   setTimeout(function(){

      // logic here

      // recurse
      loop();

  }, 1000);
})();
复制代码

博客地址 gitbook小册