JavaScript计时器用法分析【setTimeout和clearTimeout】

计时器是JavaScript中重要的一个组成部分，它允许您在预定的时间间隔内重复或延迟执行代码块。在本文中，我们将详细分析JavaScript中的计时器——setTimeout和clearTimeout的用法。

setTimeout

setTimeout是一种计时器，它允许您延迟一段时间后执行代码。setTimeout的语法如下：

setTimeout(function, milliseconds);

其中，function是要在计时器到期时执行的函数，milliseconds是在执行该函数之前等待的毫秒数。例如，以下代码将在1000毫秒（或1秒）后弹出消息框：

setTimeout(function() {
  alert("Hello, world!");
}, 1000);

您还可以在setTimeout函数的第三个参数中指定参数列表以传递给函数：

setTimeout(function(arg1, arg2) {
  alert(arg1 + " " + arg2);
}, 1000, "Hello", "world");

在定时器到期时，该函数将接收指定的参数，并将它们进行拼接。

clearTimeout

clearTimeout函数允许您取消先前设置的setTimeout计时器。要使用clearTimeout，您必须首先在设置计时器时为其提供一个变量名。例如，以下代码设置了一个计时器，并将其储存在变量timer中：

var timer = setTimeout(function() {
  alert("Hello, world!");
}, 1000);

要取消该计时器，请使用以下代码：

clearTimeout(timer);

这会完全删除该计时器，以便它将不再执行。

示例

接下来，让我们看两个使用setTimeout和clearTimeout的示例。

示例1

以下代码演示如何在页面载入后5秒钟的延迟后，向页面添加一条消息：

window.onload = function() {
  var timer = setTimeout(function() {
    var pElement = document.createElement("p");
    pElement.innerHTML = "Welcome to my website!";
    document.body.appendChild(pElement);
  }, 5000);

  document.getElementById("cancelBtn").addEventListener("click", function() {
    clearTimeout(timer);
  });
};

该代码首先在页面载入后5秒钟后向页面添加了一条欢迎消息。同时，它还为一个按钮添加了一个点击事件cancelBtn。当单击该按钮时，它将调用clearTimeout函数来取消计时器。

示例2

以下代码演示如何使用setTimeout函数实现周期性数据请求，以便更新页面上的内容：

function requestData() {
  // 假设这里是数据请求的逻辑
  console.log("Data requested at", new Date());
}

setInterval(requestData, 5000);

该代码定义了一个名为requestData的函数，用于获取数据。随后，它调用setInterval函数，以1秒为间隔重复执行该函数。每次调用函数都会在控制台上显示更新时间。

总结

JavaScript计时器允许您在预定的时间间隔内执行代码。setTimeout允许您在将来的某个时间点执行函数，而clearTimeout允许您取消设置的计时器。明确了这些概念，并开始实践使用计时器，可以使您的JavaScript程序更加灵活。