setInterval 和 setTimeOut 区别

在 JavaScript 中，setInterval 和 setTimeout 都是用于执行函数或代码片段的定时器函数。它们之间的区别在于触发执行的时间和执行的次数。

1. setInterval：
   • setInterval 函数会按照指定的时间间隔重复执行函数或代码片段。
   • 语法：setInterval(callback, delay)
   • callback 是要执行的函数或代码片段。
   • delay 是执行之间的时间间隔，以毫秒为单位。
   • setInterval 函数会返回一个定时器标识符，可以使用 clearInterval 函数来停止定时器的执行。

以下是一个使用 setInterval 的示例代码：

let count = 0;

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

const intervalId = setInterval(incrementCount, 1000);

// 5秒后停止定时器的执行
setTimeout(() => {
  clearInterval(intervalId);
}, 5000);

在上面的示例中，我们定义了一个 incrementCount 函数，它会每秒增加 count 变量的值并打印出来。然后，我们使用 setInterval 函数每秒调用一次 incrementCount 函数。最后，我们使用 setTimeout 函数在 5 秒后调用 clearInterval 来停止定时器的执行。

2. setTimeout：
   • setTimeout 函数会在指定的延迟时间后执行一次函数或代码片段。
   • 语法：setTimeout(callback, delay)
   • callback 是要执行的函数或代码片段。
   • delay 是延迟时间，以毫秒为单位。
   • setTimeout 函数会返回一个定时器标识符，可以使用 clearTimeout 函数来取消定时器的执行。

以下是一个使用 setTimeout 的示例代码：

function showMessage() {
  console.log("Hello, World!");
}

// 2秒后执行 showMessage 函数
const timeoutId = setTimeout(showMessage, 2000);

// 如果在 1秒内点击了按钮，则取消定时器的执行
document.getElementById("cancelButton").addEventListener("click", () => {
  clearTimeout(timeoutId);
});

在上面的示例中，我们定义了一个 showMessage 函数，它会打印出 “Hello, World!”。然后，我们使用 setTimeout 函数在 2 秒后调用 showMessage 函数。最后，如果在 1 秒内点击了一个按钮（假设有一个 id 为 “cancelButton” 的按钮），我们会调用 clearTimeout 来取消定时器的执行。

总结：

• setInterval 会按照指定的时间间隔重复执行函数或代码片段。
• setTimeout 会在指定的延迟时间后执行一次函数或代码片段。
• 通过使用返回的定时器标识符，可以使用 clearInterval 和 clearTimeout 来停止定时器的执行。