js 定时器代码块

关于

记录 js 定时器使用方法的代码块，方便调用。

代码块

setTimeout

setTimeout 是一次性定时器，可以用来倒计时，执行一次必任务等场景。

使用方法：

setTimeout([要执行的函数], [执行间隔时间])

代码块：

setTimeout(() => {
  console.log('定时器一秒后执行！')
}, 1000)

clearTimeout

clearTimeout 可用于取消未执行的 setTimeout。

使用方法：

clearTimeout([需要清除的定时器ID])

代码块：

let timer = setTimeout(() => {
  console.log('定时器不会被执行！')
}, 1000)
clearTimeout(timer)

setInterval

setInterval 只要不停止或关闭页面就会一直执行。

使用方法：

setInterval([要执行的函数], [执行间隔时间])

代码块：

setInterval(() => {
  console.log('定时器每一秒执行一次！')
}, 1000)

clearInterval

clearInterval 可用于取消执行 setInterval。

使用方法：

clearInterval([需要清除的定时器ID])

代码块：

let timer = setInterval(() => {
  console.log('一秒后定时器不会被执行了！')
}, 1000)

setTimeout(() => {
  clearInterval(timer)
}, 1000)

优化定时器

优化后，多次点击同一按钮只能触发一次执行结果。

setInterval 同理。

下面代码块放入 .html 文件中

<button id="test">点我！</button>
<script>
  let btn = document.getElementById('test')

  let timer
  btn.onclick = () => {
    if (timer) {
      // 如果定时器存在进入
      clearTimeout(timer) // 每次清除定时器。
    }
    timer = setTimeout(() => {
      console.log('点击多次只会触发一次！')
    }, 1000)
  }
</script>

其他按钮效果可以参考节流与防抖。