setTimeout() 和 setIntervale() 小结

setTimeout()

​ JavaScript语言是单线程语言，它有一个叫做执行队列的东西来决定代码的执行顺序，而定时器的作用是：在特定的时间后将代码插入到执行队列。

这里要特别理解：定时器setTimeout(function, Interval)这里的Interval是指当Interval个单位时间过去之后将代码function插入到执行队列中，而不是过去Interval个单位时间之后执行function代码。也就说明代码的执行的时间将大于等于Interval。

使用

setTimeout

设置循环任务：当

num === 10

的时候，任务完成

let num = 0;
let max = 10;
let incrementNumber = function () {
  num++
  console.log(num)
  if (num < max) {
    setTimeout(incrementNumber, 500)
  } else {
    alert('任务完成，奖励自己一朵小红花')
  }
}
setTimeout(incrementNumber, 500);
           

有了

setTimeout

，那

setInterval

是否可以完成同样的任务呢？

let num = 0, intervalId = null;
let max = 10;

let incrementNumber = function () {
  num++
  console.log(num)
  if (num === max) {
    clearInterval(intervalId)
    alert('任务完成，奖励自己一朵小红花')
  }
};
intervalId = setInterval(incrementNumber, 500);
           

但是呢，一般来说，

setIntervale()

在实践中很少会在生产环境下使用

setInterval()

接收两个参数：要执行的代码（字符串或函数），以及把下一次执行定时代码的任务添加到队列要等待的时间（毫秒）。

这里的关键点是，第二个参数，也就是间隔时间，指的是向队列添加新任务之前等待的时间。比如，调用

setInterval()

的时间为

10:00:00

，间隔时间为 3000 毫秒。这意 味着

10:00:03

时，浏览器会把任务添加到执行队列。浏览器不关心这个任务什么时候执行或者执行要花多长时间。因为一个任务结束和下一个任务开始之间的时间间隔是无法保证的，有些循环定时任务可能会因此而被跳过。