setInterval

window.setInterval()  方法重复调用一个函数或执行一个代码段,在每次调用之间具有固定的时间延迟。

解决的问题:由于 JavaScript 的单线程特征,定时器提供了一种跳出单线程限制的方法,即让一段代码在一定毫秒之后,再异步执行。

语法

let intervalID = window.setInterval(func, delay[, param1, param2, ...]);
let intervalID = window.setInterval(code, delay);

参数

参数描述
intervalId定时器的唯一辨识符,可以作为参数传给 clearInvterval()
func需要重复调用的函数
code是另一种语法的应用,是指你想重复执行的一段字符串构成的代码(不推荐使用,不推荐的原因和 eval() 一样)
delay是每次延迟的毫秒数(一秒等于 1000 毫秒),函数的每次调用会在该延迟之后发生。和 setTimeout 一样,实际的延迟时间可能会稍长一点

需要注意的是,IE 不支持第一种语法中向延迟函数传递额外参数的功能。如果你想要在 IE 中达到同样的功能,你必须使用一种兼容代码。

注意

  • 定时器的时间间隔设为 0,也会有几毫秒的延迟
  • 在使用 setIntervalsetTimeout 时最好将其返回值赋值给一个变量,以便取消定时器
  • 在使用 Vue 的时候,setTimeoutsetIntervalthis 指向时 window 对象,访问不到组件数据以及方法
  • 在使用 Vue 的时候,路由跳转但不会销毁 setInterval ,但是组件已经销毁了,这会导致问题
  • 在执行线程中 setTimeout / setInterval 无法保证准时执行回调函数的
  • setInterval 调用有可能会被废弃以及 setInterval 的连续执行

停止间歇调用

使用 clearInterval(timeId) 可以清除间歇调用定时器(定时器还在,只是没调用)。

使用方法

基本用法

// 间歇调用的函数
const animate = () => {
console.log('间隙调用');
};
// 间歇调用定时器(表示每过500毫秒执行一次animate函数)
const intervalID = setInterval(animate, 500);
// 清除调用
clearInterval(intervalID);