JavaScript setTimeout与setTimeinterval使用案例详解

JavaScript setTimeout与setInterval使用案例详解

setTimeout

在JavaScript中，setTimeout函数可以延迟执行一个函数，这个函数会在一定延迟时间后被调用，下面是使用setTimeout的基本语法：

setTimeout(function, delay, param1, param2, ...)

• function 参数表示要执行的函数
• delay 参数表示延迟的时间，单位为毫秒
• param1, param2, ... 表示传递给被执行的函数的参数

示例：延迟执行一个函数

function showMessage(message) {
  console.log(message);
}

setTimeout(showMessage, 3000, "Hello, world!");

这个例子中，我们创建了一个名为 showMessage 的函数，然后在调用 setTimeout 函数时将其作为第一个参数传递给 setTimeout 函数。第二个参数是延迟的时间，第三个参数是传递给 showMessage 函数的一个参数，而这个函数将在 3 秒后被调用。

setInterval

setInterval 函数用于重复地执行一个函数，下面是使用 setInterval 的基本语法：

setInterval(function, delay, param1, param2, ...)

• function 参数表示要执行的函数
• delay 参数表示重复执行的时间间隔，单位为毫秒
• param1, param2, ... 表示传递给被执行的函数的参数

示例：每隔一定时间执行一次函数

var count = 0;

function showMessage() {
  console.log(++count);
}

setInterval(showMessage, 1000);

这个例子中，我们创建了一个变量 count，用于记录函数 showMessage 被执行的次数。然后我们调用 setInterval 函数，将 showMessage 函数作为第一个参数传递给它，第二个参数是重复执行的时间间隔（这里是每隔 1 秒），这个函数将每隔 1 秒被调用一次，并且每次被调用时，变量 count 的值会自增 1。

示例：计时器

var count = 0;

function showMessage() {
  console.log(++count);
}

var intervalId = setInterval(showMessage, 1000);

setTimeout(function() {
  clearInterval(intervalId);
}, 10000);

这个例子会创建一个计时器，它会每隔 1 秒输出一个数字，直到 10 秒后停止输出。首先，我们调用 setInterval，将 showMessage 函数作为第一个参数传递给它，并将时间间隔设置为 1 秒。这个函数将每隔 1 秒被调用一次，并且每次被调用时，变量 count 的值会自增 1。

然后我们调用 setTimeout，将参数设置为一个函数调用，这个函数会调用 clearInterval，并且将之前调用 setInterval 时返回的 id 作为参数传递给它（这个 id 标识了计时器）。这样，10 秒后，我们的计时器就会被停止。