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

在本文中，我们将学习如何在运行一个元素后更改 setInterval() 时间。 setInterval() 方法读取一次计时并定期调用该函数。有两种方法可以解决这个问题，下面将讨论：
方法一：使用 clearInterval() 方法： setInterval() 方法返回一个数字 ID。可以将此 ID 传递给 clearInterval() 方法以清除/停止 setInterval 计时器。在这种技术中，我们在每个 setInterval() 之后继续触发 clearInterval() 以停止前一个 setInterval() 并使用新的计数器初始化 setInterval()。
例子：

html

     

    
        How to Change the Time Interval of
        setinterval() Method after Running
        one Element using JavaScript ?
    

 

    
     
    
 
        // Output message
        var msg = document.getElementById("message");
 
        var t = 200; // Timer
         
        // Stores the setInterval ID used by
        // clearInterval to stop the timer
        var interval;
 
        f1();
 
        // Function that changes the timer
        function changeTimer(){
            t = t * 1.2;
        }
 
        // Function that run at irregular intervals
        function f1() {
             
            // Clears the previous setInterval timer
            clearInterval(interval);
            msg.innerHTML += "
<p>Function Fired</p>
";
            changeTimer();
            interval = setInterval(f1, t);
        }
    

 

输出：

方法 2：使用 setTimeout() 方法：这种技术比前一种技术更容易和简单。 setTimout() 方法在一段时间后触发一个函数。计时器是我们想要运行函数的时间。在这种技术中，在执行所需任务后，我们更改计时器的值并再次调用 setTimeout()。现在，由于 timer 的值发生变化，每个函数调用都会以不同的时间间隔调用。
例子：

html

     

    
        How to Change the Time Interval of
        setinterval() Method after Running
        one Element using JavaScript ?
    

 

    
    
 
        // To display output
        var msg = document.getElementById("message");
 
        // Timer
        var t = 200;
 
        f1();
         
        // Function that changes the timer
        function changeTimer(){
            t = t * 1.2;
        }
         
        // Function to run at irregular intervals
        function f1() {
            msg.innerHTML += "
<p>Function Fired</p>
";
            changeTimer();
            setTimeout(f1, t);
        }
    

 

输出：