2

JavaScript setInterval 计时器指定时间重复调用函数 | myfreax

 11 months ago
source link: https://www.myfreax.com/javascript-setinterval/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

JavaScript setInterval 计时器重复调用函数

您将学习如何使用 JavaScript setInterval() 重复调用函数，并且每次调用之间有固定的延迟

Updated At 10 Sep 2023 2 min read
By myfreax
JavaScript setInterval 计时器重复调用函数

JavaScript setInterval 计时器重复调用函数

在本教程中，您将学习如何使用 JavaScript setInterval() 重复调用函数，并且每次调用之间有固定的延迟。

JavaScript setInterval 简介

setInterval() 是 window 对象的方法。setInterval() 重复调用一个函数，每次调用之间有固定的延迟。

下面是 setInterval 的语法形式：

let intervalID = setInterval(callback, delay,[arg1, arg2, ...]);

在这个语法中：

  • callback 是每 delay 毫秒执行一次回调函数。
  • delay 是计时器在执行回调函数之间应延迟的时间（以毫秒为单位）。
  • arg1, ...argN 是传递给回调函数的参数。

setInterval 返回一个非零数字，用于标识创建的计时器。您可以将 intervalID 传递给 clearInterval() 来取消超时。

请注意，setInterval() 工作原理与 setTimeout() 类似，但它会在每个指定的延迟后重复执行一次回调。

JavaScript setInterval 示例

以下示例使用 setInterval() 和 clearInterval() 在按下“开始”按钮后每秒更改一次标题的颜色。如果停止按钮，clearInterval()将取消超时。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>JavaScript setInterval Demo</title>

  <script>
    let intervalID;
 
    function toggleColor() {
      let e = document.getElementById('flashtext');
      e.style.color = e.style.color == 'red' ? 'blue' : 'red';
    }

    function stop() {
      clearInterval(intervalID);
    }

    function start() {
       intervalID = setInterval(toggleColor, 1000); 
    }
  </script>
</head>
 
<body>
  <p id="flashtext">JavScript setInterval Demo</p>
  <button onclick="start()">Start</button>
  <button onclick="stop()">Stop</button>
  
</body>
</html>

setInterval() 以指定的延迟重复调用一个函数多次。它返回一个 intervalID 可以传递给 clearInterval() 来取消 setInterval() 的运行。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK