JavaScript中的定时器

• 在 js 里面，有两种定时器，倒计时定时器 和 间隔定时器

倒计时定时器  

• 倒计时多少时间以后执行函数

• 语法： setTimeout(要执行的函数，多长时间以后执行)

• 会在你设定的时间以后，执行函数

var timerId = setTimeout(function () {
  console.log('我执行了')
}, 1000)
console.log(timerId) // 1

• 时间是按照毫秒进行计算的，1000 毫秒就是 1秒钟

• 所以会在页面打开 1 秒钟以后执行函数

• 只执行一次，就不在执行了

• 返回值是，当前这个定时器是页面中的第几个定时器

 

间隔定时器  

 

• 每间隔多少时间就执行一次函数

• 语法： setInterval(要执行的函数，间隔多少时间)

  var timerId = setInterval(function () {
    console.log('我执行了')
  }, 1000)

• 时间和刚才一样，是按照毫秒进行计算的

• 每间隔 1 秒钟执行一次函数

• 只要不关闭，会一直执行

• 返回值是，当前这个定时器是页面中的第几个定时器

 

定时器的返回值  

 

• 设置定时器的时候，他的返回值是部分 setTimeout 和 setInterval 的

• 只要有一个定时器，那么就是一个数字

var timerId = setTimeout(function () {
  console.log('倒计时定时器')
}, 1000)

var timerId2 = setInterval(function () {
  console.log('间隔定时器')
}, 1000)

console.log(timerId) // 1
console.log(timerId2) // 2

 

关闭定时器  

• 我们刚才提到过一个 timerId，是表示这个定时器是页面上的第几个定时器

• 这个 timerId 就是用来关闭定时器的数字

• 我们有两个方法来关闭定时器 clearTimeout 和 clearInterval

var timerId = setTimeout(function () {
  console.log('倒计时定时器')
}, 1000)
clearTimeout(timerId)

• 关闭以后，定时器就不会在执行了

 

var timerId2 = setInterval(function () {
  console.log('间隔定时器')
}, 1000)
coearInterval(timerId2)

 

• 关闭以后定时器就不会在执行了

 

• 原则上是

  • clearTimeout 关闭 setTimeout

  • clearInterval 关闭 setInterval

• 但是其实是可以通用的，他们可以混着使用

var timerId = setTimeout(function () {
  console.log('倒计时定时器')
}, 1000)
// 关闭倒计时定时器
clearInterval(timerId)

var timerId2 = setInterval(function () {
  console.log('间隔定时器')
}, 1000)
// 关闭间隔定时器
clearTimeout(timerId2)