JavaScript 定时事件

JavaScript 中与定时处理相关的方法有 2 个:setTimeout 和 setInterval,本章节使用实例介绍他们的用法。

JavaScript 中与定时处理相关的方法有 2 个: setTimeoutsetInterval ,本章节使用实例介绍他们的用法。

setTimeoutsetInterval 都是 window 对象的方法,都可以直接使用。

  • setTimeout: 在等待指定的毫秒数后执行函数。
  • setInterval: 每间隔指定的毫秒数都重复执行函数。

setTimeout() 方法

setTimeout() 方法设置一个定时器,该定时器在定时器到期后执行一个函数或指定的一段代码。

语法:

setTimeout(function, milliseconds);

参数说明:

  • function:要等待执行的函数
  • milliseconds: 要等待的毫秒数

! 1 秒等于 1000 毫秒。

下例单击一个按钮,等待 3 秒,页面提示“Hello”:

<button onclick="setTimeout(myFunction, 3000)">3 秒后提示</button>

<script>
  function myFunction() {
    alert("Hello");
  }
</script>

clearTimeout()

clearTimeout() 方法用于取消执行一个 setTimeout() 事件。当我们使用 setTimeout() 定义了一个延迟执行的事件之后,在执行之前可以使用 clearTimeout() 取消掉。

语法:

window.clearTimeout(timeoutID);

参数说明:

  • timeoutID: 要取消定时器的标识符。 该 ID 由相应的 setTimeout() 调用返回。

下例使用 clearTimeout() 方法取消定时器:

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

与上面相同的示例,但添加了“停止”按钮:

<button onclick="myVar = setTimeout(myFunction, 3000)">3 秒后提示</button>

<button onclick="clearTimeout(myVar)">取消提示</button>

setInterval() 方法

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

语法:

window.setInterval(function, milliseconds);

参数说明:

  • function:要重复执行的函数
  • milliseconds: 函数的执行间隔毫秒数

动态显示当前时间:

setInterval(myTimer, 1000);

function myTimer() {
  const d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

clearInterval() 方法

clearInterval() 方法可取消先前通过 setInterval() 设置的重复定时任务。

语法:

window.clearInterval(intervalID);

参数说明:

  • intervalID: 要取消的定时器的 ID。是由 setInterval() 返回的。

与上面相同的示例,但我们添加了一个“停止时间”按钮:

<p id="demo"></p>

<button onclick="clearInterval(myVar)">时间停止</button>

<script>
  setInterval(myTimer, 1000);
  function myTimer() {
    const d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
  }
</script>