在JavaScript中的时间事件

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

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

定时器停止后执行传递的函数。传递的参数（在延迟时间之后指定）是可选的，并且可以在此函数中访问。延迟是定时器等待执行函数的时间。它以毫秒为单位表示，因此’1000’表示’1’秒。

语法：

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

以下示例演示了setTimeout()方法：

示例：

HTML

<!DOCTYPE html> 
<html> 
  
<body style="text-align:center;"> 
    <h1 style="color:#378E47;"> 
        GeeksforGeeks 
    </h1> 
  
    <h2>setTimeout() method</h2> 
    <p>Click the button and wait for 3 seconds.</p> 
  
    <!-- Setting the onclick method for the button -->
    <button onclick="setTimeout(geeksforgeeks, 3000);"> 
        Press me 
    </button> 
      
    <h2 style="font-size:3em;color:#378E47;"></h2> 
  
    <script> 
        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!"; 
        } 
    </script> 
</body> 
  
</html>

输出：

在JavaScript中的时间事件

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

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

语法：

scope.clearTimeout(timeoutID)

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

示例：

HTML

<!DOCTYPE html> 
<html> 
  
<body style="margin-left:50px;"> 
    <h1 style="color:#378E47;"> 
        GeeksforGeeks! 
    </h1> 
  
    <h2>clearTimeout() method</h2> 
    <p>Press the first button and wait 4 seconds.</p> 
  
    <p> 
        Press the second button before 4 seconds to 
        prevent the first button to execute. 
    </p> 
  
    <button style="margin-right:10px" 
        onclick="startFunction()">Press me 
    </button> 
      
    <button onclick="stopFunction()">Stop</button> 
    <h1 style="font-size:3em; color: #378E47;"></h1> 
  
    <!-- Javascript Code -->
    <script> 
        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); 
        } 
    </script> 
</body> 
  
</html>

输出:

在JavaScript中的时间事件

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

传递的参数（在延迟时间之后指定）是可选的，并且可在函数中访问。延迟是决定传递的函数参数执行频率的时间。它以毫秒为单位，因此‘1000’表示‘1’秒。

语法：

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

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

它接受一个参数，即由setInterval()方法返回的intervalID。传递给此方法的无效ID不会产生任何效果。

语法：

scope.clearInterval(intervalID)

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

示例：

HTML

<!DOCTYPE html> 
<html> 
  
<body style="text-align:center; color:#378E47;"> 
    <h1> GeeksforGeeks Counter.</h1> 
    <h2 style="font-size:5em;">10</h2> 
  
    <!-- Setting the onclick method for the button -->
    <button onclick="geeksforgeeksCounter()"> 
        Press me 
    </button> 
  
    <!-- JavaScript code -->
    <script> 
  
        // 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); 
        } 
    </script> 
</body> 
  
</html>

输出:

在JavaScript中的时间事件

其他关键要点：

setTimeout() 和 setInterval() 方法共享同一个存储 ID 的池，这意味着我们可以互换使用 clearTimeout() 和 clearInterval() 方法。然而，我们应避免这样做。
支持 setTimeout() 和 setInterval() 方法的浏览器主要有：Google Chrome，Internet Explorer，Safari，Opera 和 Firefox。
当你不需要使用 clearTimeout() 或 clearInterval() 方法时，不需要分别存储由 setTimeout() 或 setInterval() 方法返回的 ID。