定时器

间歇函数

• 网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
• 例如：网页中的倒计时
• 要实现这种需求，需要定时器函数

1. 开启定时器

语法：setInterval(函数， 间隔时间)

作用：每隔一段时间调用这个函数

间隔时间单位是毫秒

注意：

1. 函数名字不需要加括号
2. 定时器返回的是一个id数字

举例说明：

let num = 0
function repeat () {
  console.log(`第${++num}秒`)
}
setInterval(repeat, 1000);

// setInterval(function () {
//   console.log('一秒执行一次')
// }, 1000)

返回结果：

2. 关闭定时器

语法：

let 变量名 = setInterval(函数, 间隔时间)
clearInterval(变量名)

举例说明：

let i = 0;
function fn () {
  console.log(++i)
  
  // 五秒后关闭定时器
  if (i === 5) {
    console.log("5秒，关闭定时器");
    clearInterval(interval)
  }
  
}
let interval = setInterval(fn, 1000);

返回结果

定时器-延时函数

JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout

setTimeout(回调函数, 等待的毫秒数)

setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window

清除延时函数：

let time = setTimeout(回调函数, 等待的毫秒数)
clearTimeout(time)

注意点：

延时器需要等待,所以后面的代码先执行

每一次调用延时器都会产生一个新的延时器

两种定时器的对比：

延时函数：执行一次

间歇函数：每隔一段时间就执行一次，除非手动清除