Javascript 中的计时事件

定时事件是有助于在特定时间间隔执行一段代码的事件。这些事件在 HTML DOM（文档对象模型）Window 对象中直接可用，即它们存在于浏览器中。因此，这些被称为全局方法，可以通过“window”对象或不通过它来调用。下面列出了各种计时事件：

setTimeout() 方法：该方法用于在一定时间后执行一段代码。大多数情况下，这段代码是写在一个函数的。该函数要么作为参数传递，要么作为匿名函数直接作为参数传递。它返回一个正整数，表示由于调用 setTimeout 方法而创建的计时器的 ID。使用变量来存储 ID 是可选的，但取决于我们想要使用clearTimeout()方法取消计时器的情况。

定时器停止后执行传递的函数。传递的参数（在延迟时间之后指定）是可选的，并且可以被这个函数访问。延迟是计时器必须等待函数执行的时间。它以毫秒为单位写入，因此“1000”代表“1”秒。

句法：

let timeoutID = scope.setTimeout(function, delay, param1, param2, ...)

下面的示例演示了 setTimeout() 方法：

例子：

HTML

  

    
        GeeksforGeeks
    
  
    setTimeout() method
    Click the button and wait for 3 seconds.
  
    
    
        Press me
    
      
    
  
    
        function geeksforgeeks() {
  
            // Fetching the first index h2 element
            var h2Heading =
                document.getElementsByTagName("h2")[1];
  
            // Changing the innerHTML tag of the
            // fetched h2 heading
            h2Heading.innerHTML = "Welcome here!";
        }
    

  

输出：

clearTimeout() 方法： “clearTimeout()”方法用于取消使用setTimeout()方法建立的超时。如果在 setTimeout() 方法中指定的时间延迟内调用该函数，则此方法将停止执行作为参数传递的函数。

它接受一个参数，即setTimeout()方法返回的timoutID 。传递给此方法的无效 ID 不会执行任何操作。

句法：

scope.clearTimeout(timeoutID) 

下面的示例演示了 clearTimeout() 方法：

例子：

HTML

  

    
        GeeksforGeeks!
    
  
    clearTimeout() method
    Press the first button and wait 4 seconds.
  
    
        Press the second button before 4 seconds to
        prevent the first button to execute.
    
  
    Press me
    
      
    Stop
    
  
    
    
        var setTimeoutID;
  
        function startFunction() {
            setTimeoutID = setTimeout(function () {
  
                // Fetching the first indexed h1 element
                var h2Heading =
                    document.getElementsByTagName("h1")[1];
  
                // Changing the innerHTML tag of the 
                // fetched h2 heading
                h2Heading.innerHTML = "Welcome here!";
            }, 4000);
        }
  
        function stopFunction() {
            clearTimeout(setTimeoutID);
        }
    

  

输出：

setInterval() 方法：该方法用于在每次调用之间的固定时间间隔内重复执行一段代码。每个参数的含义和用法与setTimeout()方法相同。它返回一个正整数，表示由于调用 setTimeout 方法而创建的计时器的 ID。使用变量来存储 ID 是可选的，但取决于我们想要使用clearInterval()方法取消计时器的情况。

传递的参数（在延迟时间之后指定）是可选的，并且可以被函数访问。延迟是决定作为参数传递的函数执行频率的时间。它以毫秒为单位写入，因此“1000”代表“1”秒。

句法：

var intervalID = scope.setInterval(function, delay, param1, param2, ...)

clearInterval() 方法：这个 方法用于取消使用setInterval()方法建立的重复定时动作。如果在 setInterval() 方法的所有间隔结束之前调用该方法，则该方法将停止作为参数传递的函数的执行。

它接受一个参数，即setInterval()方法返回的intervalID 。传递给此方法的无效 ID 不会执行任何操作。

句法：

scope.clearInterval(intervalID)

下面的示例演示了 clearInterval() 方法：

例子：

HTML

  

     GeeksforGeeks Counter.
    10
  
    
    
        Press me
    
  
    
    
  
        // Variable for maintaining count of the timer
        let count = 10;
  
        function geeksforgeeksCounter() {
  
            // Fetching the 0th indexed h2 element
            var h2Heading =
                document.getElementsByTagName("h2")[0];
            var countDownID = setInterval(function () {
                count--;
                h2Heading.innerHTML = count;
  
                if (count <= 0) {
                    // Changing the innerHTML tag of 
                    // the fetched h2 heading.
                    h2Heading.innerHTML = "Welcome here!";
                    // Stop the timer
                    clearInterval(countDownID);
                }
            }, 1000);
        }
    

  

输出：

其他要点：

• setTimeout()和setInterval()方法共享同一个存储 ID 的池，这意味着我们可以交替使用clearTimeout()和clearInterval()方法。但是，我们应该避免这样做。
• 支持setTimeout()和setInterval()方法的浏览器主要有 Google Chrome、Internet Explorer、Safari、Opera 和 Firefox。
• 当不需要使用clearTimeout()或clearInterval()方法时，则无需分别存储setTimeout()或setInterval()方法返回的 ID。