JavaScript 中 setTimeout()函数的目的是什么？

这 setTimeout()是窗口对象内部的一个方法，它调用指定的函数或在给定时间段后仅计算一次作为字符串提供的 JavaScript 表达式。以下输出显示了窗口对象中存在setTimeout()方法。

我们都多次使用过警报或提醒，这个setTimeout()方法在 Web 应用程序中也有相同的用途。我们用它来延迟某种执行。它还用于 jquery 中的动画和 DOM 操作。

句法：

setTimeout(function, time);

参数：

• 函数：它是对将在给定时间后运行的函数的引用。
• time：给定函数将执行的毫秒数。

返回值：它返回一个计时器 ID，稍后在您想清除函数的倒数计时器时很有用。

示例 1：下面演示了 setTimeout() 方法的基本演示。

在 Javascript 中，一切都在执行上下文中执行。因此将创建一个全局执行上下文并将其推送到 JavaScript 引擎的调用堆栈中。在全局执行上下文中，内存分配阶段开始，所有变量和函数都在内存堆中获得空间。名为alertAfter3Seconds的函数将在 Heap 中获得空间并且没有变量。

执行线程启动，JavaScript 引擎遇到控制台日志语句，因此会在 chrome 开发者工具的控制台上打印一行。 setTimeout()函数将提供的函数注册为要在某些提供的（3000）毫秒后执行的参数。浏览器在内部保留它的记录，一旦计时器到期，它就会将该函数排入回调队列。现在，一旦调用堆栈变空，不断运行的事件循环就会注意到它并将回调函数从回调队列中取出并将其推送到调用堆栈中。在这种情况下，只有一个全局的执行上下文，并且一旦执行console.log语句，调用堆栈中就没有任何内容，因此事件循环将从回调队列中取出回调函数并将其推送到调用中堆。

当我们的回调函数在调用堆栈中时，很明显可以理解将要发生的事情。在函数内部，有一个简单的警报。

HTML

  

    
        console.log("This is the demo of setTimeout");
  
        function alertAfter3Seconds() {
            alert("3 Second completed hi!");
        }
        setTimeout(alertAfter3Seconds, 3000);
    

  

输出：这是警报 显示 由于 setTimeout() 方法，在 3 秒后。

注意：事件循环只会将回调函数推送到 JS 引擎的调用栈中，如果它是空的。提供给 setTimeout() 的函数不需要在给定的毫秒后执行，这是浏览器将该函数排入回调队列的最短时间，它必须等待多长时间是不可预测的推入 JS 引擎调用堆栈。

示例2：下面演示事件循环只会在调用栈为空时将函数压入调用栈。

将创建全局执行上下文并将其推送到 js 引擎的调用堆栈中。然后内存分配阶段开始， setTimeout()中的函数和这两个变量将在堆中获取内存。在线程执行阶段，控制台日志的第一行被打印出来。在下一行中， setTimeout()在 Web API 中注册一个函数，然后在内部启动计时器，一旦 1000 毫秒结束，它就会进入回调队列。

同时，JavaScript 引擎正忙于执行其代码。我们将当前日期存储在一个变量中。 Date.now() 返回自纪元时间以来经过的毫秒数。因此，为了将其转换为秒，我们将其除以 1000。在下一个中，我们将当前时间 + 5 分配给某个目的。

如果currentTime小于expectedTime ，我们正在检查一个条件， expectedTime保持currentTime + 5。我们不断地用Date.now()改变currentTime的值。当currentTime不再小于expectedTime时，循环中断。括号内的条件将在 5 秒后中断循环。我们的调用栈是空的，没有什么可以执行，等待这种情况的事件循环将回调函数推送到 JS 调用栈中。该函数位于调用堆栈中，因此很容易理解将要发生的事情，只需执行回调函数内部的console.log语句即可。您是否注意到 while 循环花费了额外的 5 秒来执行代码，然后执行回调函数！由于我们已将 1000 毫秒设置为设置的超时时间，因此我们希望在 1 秒后执行该回调函数。实际上，提供的毫秒是函数函数在js调用堆栈中。

HTML

  

    
        console.log("Hi, I am the first Line of Code");
  
        setTimeout(() => {
                console.log("Hi, I am the console.log inside setTimeout")
            },
            1000
        );
  
        let currentTime = Date.now() / 1000;
        let expectedTime = currentTime + 5;
  
        console.log("Executing 5 Seconds inside Loop");
        console.log("Timer Starts & Current Time " + currentTime);
  
        while (currentTime < expectedTime) {
            currentTime = Date.now() / 1000;
        }
  
        console.log("Timer Ends & Current Time " + currentTime);
        console.log("Hi, I am the Last Line of Code");
    

  

输出：