定时器

定时器

• Javascript 在游览器是单线程执行的，但允许使用定时器指定在某个时间之后或每隔一段时间就执行响应的代码。

setTimeout() 用于指定在一定时间后执行某些代码。

• setTimeout() 方法通常接受两个参数：要执行的代码和在执行回调函数前等待的时间（毫秒）。
  • 第一个参数可以是包括 JavaScript 代码的字符串（类似于传给 eval() 的字符串）或者一个函数。
  • 第二个参数是要等待的毫秒数，而不是要执行代码的确切时间。

setTimeout(() => {
	alert('Hello Word');
},500);

• JavaScript 是单线程的，所以每次只能执行一段代码。
• 为了调度不同代码的执行，JavaScript 维护了一个任务队列，其中的任务会按照添加到队列的先后顺序执行。
• setTimeout() 的第二个参数只是告诉 JavaScript 引擎在指定的毫秒数过后把任务添加到这个队列。
• 如果队列是空的，则会立即执行该代码。如果队列不是空的，则代码必须等待前面的任务执行完才能执行。

取消 setTimeout()

• 调用 setTimeout() 时，会返回一个表示该超时排期的数值 ID。
• 这个超时 ID 是被排期执行代码的唯一标识符，可用于取消该任务。

// 设置超时任务
let timeoutId = setTimeout(() => {
	alert('Hello Word');
},500);
// 取消超时任务
clearTimeout(timeoutId);

• 只要在指定时间到达之前调用 clearTimeout()，就可以取消超时任务。
• 在执行后再调用则没有效果。

所有超时函数的 this 值指向 window ，严格模式下是 undefined。
如果是箭头函数的化，this 会保留为定义它时所在的词汇作用域。

setInterval() 用于指定每隔一顿啊时间执行某些代码。

• setInterval() 指定的任务会每隔指定时间就执行一次，直到取消循环定时或者页面卸载。
• setInterval() 同样可以接受两个参数：
  • 要执行的代码（字符串或函数）。
  • 把下一次定时代码的任务添加到队列要等待的时间（毫秒）。

setInterval(() => {
	alert('Hello Wrold');
},500);

注意，这里的第二个参数（间隔时间），指的是向任务队列添加新任务之前那等待的时间。
游览器不关心这个任务什么时候执行，执行多长时间。
所以，执行时间短，非阻塞的回调函数比较适合 setInterval();

取消 setInterval()

• setInterval() 方法也会返回一个循环定时 ID，可以用于某个时间点取消循环定时。
• 要取消循环定时，可以调用 clearInterval().

注意

• setInterval() 在实践中很少会用在生产环境下使用。
• 因为一个任务结束和下一个任务开始的时间间隔是无法保证的，有些循环定时任务可能因此被跳过。
• 可以用setTimeout() 代替 setInterval();