浅谈对于“不用setInterval，用setTimeout”的理解

对于JavaScript中定时器的使用，我们常常会听到这样一种建议：不要使用setInterval，而应该使用setTimeout。

为什么会这样说呢？这是因为使用setInterval存在一些风险，比如说多个定时器的执行时间可能会出现重叠，导致程序出现不可预料的异常。

相反，使用setTimeout可以更加精确地控制定时器的执行。我们可以每次定时器执行完成后根据实际情况动态地调整下一次执行的时间，避免多个定时器出现重叠的情况。

下面，我们来具体分析一下如何使用setTimeout来实现定时任务。

示例1：用setTimeout模拟setInterval

假设我们需要每隔一段时间执行一次某个任务（比如说每100ms），我们可以使用一个循环的setTimeout来实现这个需求：

function doSomething() {
  console.log('Hello World!');
}

function interval() {
  setTimeout(interval, 100); // 再次设置定时器
  doSomething();
}

interval();

在上面的代码中，我们定义了一个doSomething函数表示要执行的任务，然后再定义了一个interval函数用来模拟setInterval的效果。

在interval函数中，首先通过setTimeout自身来设置下一次定时器的执行时间，然后再在当前时间执行doSomething函数即可。

示例2：使用setTimeout改善动画效果

使用setTimeout还有一个非常常见的应用场景，就是用来实现动画效果。

比如说我们需要实现一个数字滚动的效果，我们可以使用一个递归的setTimeout来动态地更新数字的值和显示效果，实现类似于滚动条的效果：

function scrollTo(target, value, duration) {
  let start = target.scrollTop;
  let end = value;
  let change = end - start;
  let startTime = new Date().getTime();

  function scroll() {
    let currentTime = new Date().getTime() - startTime;
    let val = Math.easeInOutQuad(currentTime, start, change, duration);
    target.scrollTop = val;

    if (currentTime < duration) {
      setTimeout(scroll, 1);
    }
  }

  scroll();
}

Math.easeInOutQuad = function (t, b, c, d) {
  t /= d / 2;
  if (t < 1) return c / 2 * t * t + b;
  t--;
  return -c / 2 * (t * (t - 2) - 1) + b;
};

在上面的代码中，我们定义了一个scrollTo函数用来实现数字滚动的效果。

首先我们通过一些数学计算和判断来确定更新数字过程中的具体数值，然后在scroll函数里面通过递归调用setTimeout来动态地更新数字的值和显示效果，直到达到指定的滚动时间。

总之，使用setTimeout可以帮助我们更为精确地控制定时器的执行，避免出现各种意外情况。同时，也可以通过设置递归调用的方式来实现循环和动画等多样化的需求。