深入理解setTimeout函数和setInterval函数

2023年6月11日下午12:22 • JavaScript

深入理解setTimeout函数和setInterval函数攻略

JavaScript 的 setTimeout 和 setInterval 函数是在开发中经常使用的工具，它们都可以用来延时执行某些代码。虽然看上去它们很简单，但是深入理解它们的原理和用法确实很重要，本文将从下面三个方面进行介绍：

setTimeout 和 setInterval 函数的基本用法。
setTimeout 和 setInterval 函数的参数详解。
实例演示和示例解析。

基本用法

setTimeout 和 setInterval 函数的作用是延时执行一个或多个函数，并返回一个可用于取消执行的标识符。setInterval 函数会在指定的延迟时间后重复执行，而 setTimeout 函数只会执行一次。它们的语法如下：

setTimeout(func, delay);
setInterval(func, delay);

其中，func 参数是需要延迟执行的函数，delay 参数是延迟的时间，以毫秒为单位。

参数详解

我们可以通过 setTimeout 和 setInterval 函数的参数来更加精确地控制函数的执行时间。下面是参数的详细介绍：

setTimeout 和 setInterval 函数返回的 ID

在 JavaScript 中，setTimeout 和 setInterval 函数会返回一个表示计时器的唯一 ID 的值。您可以使用此 ID 来停止其执行。

var myVar = setInterval(function(){ console.log("Hello"); }, 3000);
clearInterval(myVar);

传递参数给setTimeout 和 setInterval 函数

setTimeout 和 setInterval 函数可以接受两个以上的参数。除了上述的func 和 delay 参数外，后面还可以添加参数，这些参数会作为函数参数在延迟时间到达后传递给函数。

function sayHello(name) {
  console.log(`Hello ${name}`);
}
setTimeout(sayHello, 3000, "Bob");

this 关键字和 setTimeout/setInterval 函数

由于 JavaScript 中的 this 关键字的值会随着执行环境的不同而不同，因此在使用 setTimeout 和 setInterval 函数时，this 关键字的值也会发生变化。这意味着，回调函数中的 this 关键字可能会指向一个不同的对象或可能是 undefined。

var myObj = {
  count: 0,
  start: function() {
    var that = this;
    setInterval(function() {
      that.count++;
      console.log(that.count);
    }, 1000);
  }
};
myObj.start();

实例演示和示例解析

下面是两个示例，可以帮助您更好地理解 setTimeout 和 setInterval 函数的用法。

示例一： countdown

<button onclick="countdown(10)">Start countdown</button>
<p id="demo"></p>

<script>
function countdown(start) {
  var counter = start;
  var id = setInterval(function() {
    document.getElementById("demo").innerHTML = counter;
    counter--;
    if (counter < 0) {
      clearInterval(id);
      document.getElementById("demo").innerHTML = "Done";
    }
  }, 1000);
}
</script>

这个函数会从传递给它的数字开始倒计时。该函数使用 setInterval 函数来保存一个 ID；一旦倒计时结束，它将清除这个 ID 并在页面上显示 Done。

示例二： createTable

<button onclick="createTable()">Create table</button>

<div id="demo"></div>

<script>
function createTable() {
  var table = document.createElement("table");
  var rows = 4;
  var cols = 4;
  for (var r = 0; r < rows; r++) {
    var row = table.insertRow(r);
    for (var c = 0; c < cols; c++) {
      var cell = row.insertCell(c);
      cell.innerHTML = "hello";
    }
  }
  document.getElementById("demo").appendChild(table);
  setTimeout(function() {
    table.style.background = "yellow";
  }, 2000);
}
</script>

这个函数使用了 setTimeout 函数来改变一个表的背景色。该函数创建了一个表格，并用一个 for 循环为表格添加行和列。然后，它将表格添加到网页的 DOM 中，并在 2 秒钟后将表格的背景色更改为黄色。