如何使用JavaScript在运行时更改setinterval()方法的时间间隔

在本文中，我们将学习如何在运行一个元素后更改setInterval()方法的时间。setInterval()方法会在一定的时间间隔内读取一次定时，并定期调用函数。本文讨论了两种解决该问题的方法，如下所述：

使用clearInterval()方法
使用setTimeout()方法。

方法1：使用clearInterval()方法。

setInterval()方法会返回一个数字ID。可以将此ID传递给clearInterval()方法来清除/停止setInterval定时器。在这种技术中，我们在每个setInterval()之后不断触发clearInterval()来停止先前的setInterval()并使用新的计数器初始化setInterval()。

语法：

clearTimeout(name_of_setTimeout)

示例：这个例子展示了上述方法的使用。

<!DOCTYPE html>
<html>
<head>
    <title>
        如何在运行一个元素后更改setinterval()方法的时间间隔？
    </title>
</head>

<body>
    <div id="message"></div>

    <script>
        // 输出信息
        let msg = document.getElementById("message");

        let t = 200; // 定时器

        // 存储由clearInterval使用的setInterval ID停止定时器
        var interval;

        f1();

        // 更改定时器的函数
        function changeTimer() {
            t = t * 1.2;
        }

        // 不规则间隔运行的函数
        function f1() {

            // 清除先前的setInterval定时器
            clearInterval(interval);
            msg.innerHTML +=
                "<br>函数已触发</br>"

            changeTimer();
            interval = setInterval(f1, t);
        }
    </script>
</body>
</html>

输出：

如何使用JavaScript在运行时更改setinterval()方法的时间间隔

方法2：使用setTimeout()方法。

这种技术比前一种更简单。setTimeout()方法在一定的时间之后触发一个函数。定时器是我们希望运行函数的时间间隔。在这种技术中，在执行所需的任务后，我们更改定时器的值并再次调用setTimeout()。现在，由于定时器的值改变，每个函数调用都会在不同的时间间隔内被调用。

语法：

window.setTimeout(function, milliseconds);

示例：这个例子展示了上述方法的使用。

<!DOCTYPE html>
<html>
<head>
    <title>
        如何在运行元素之后使用JavaScript更改setinterval()方法的时间间隔？
    </title>
</head>
 
<body>
    <div id="message"></div>
 
    <script>
        // 输出信息
        var msg = document.getElementById("message");
 
        var t = 200; // 定时器
 
        // 存储setInterval的ID，用于通过clearInterval停止定时器
        var interval;
 
        f1();
 
        // 更改定时器的函数
        function changeTimer() {
            t = t * 1.2;
        }
 
        // 不规则间隔运行的函数
        function f1() {
 
            // 清除以前的setInterval定时器
            clearInterval(interval);
            msg.innerHTML +=
                "<br>函数已触发</br>"
 
            changeTimer();
            interval = setInterval(f1, t);
        }
    </script>
</body>
</html>