JavaScript setTimeout()函数的作用是什么

setTimeout() 是window对象下的一个方法，它仅在指定的时间周期之后一次性调用指定的函数或评估作为字符串提供的JavaScript表达式。下面的输出显示window对象中存在setTimeout()方法。

我们都曾多次使用过闹钟或提醒功能，这种setTimeout()方法在Web应用程序中也有相同的用途。我们使用它来延迟某些类型的执行。它还用于jQuery中的动画和DOM操作。

setTimeout()语法：

setTimeout(function, time);

参数：

function（函数）： 它是一个引用，当给定的时间过后会执行的函数。
time（时间）： 执行给定函数之前的毫秒数。

返回值： 它返回一个计时器ID，在以后的某个时刻如果你想清除倒计时器的话会很有用。

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

在JavaScript中，所有的东西都在执行上下文中执行。因此，一个全局执行上下文会被创建并推入JavaScript引擎的调用栈中。在全局执行上下文中，内存分配阶段开始，所有的变量和函数都在内存堆中分配空间。名为 alertAfter3Seconds（alertAfter3Seconds） 的函数将在堆中占用空间，而没有变量。

执行线程开始，JavaScript引擎遇到console log语句，因此一行内容将被打印在Chrome开发者工具的控制台上。setTimeout()函数注册提供的函数作为参数，在一定的毫秒数（3000）后执行。浏览器在内部保留了这个记录，一旦定时器到期，将该函数放入回调队列中。现在，一旦调用栈变为空，一直运行的事件循环将注意到，然后从回调队列中取出该回调函数，并将其推入调用栈中。在这种情况下，只有一个全局执行上下文，一旦执行 console.log 语句后，调用栈中就没有东西了，所以事件循环将从回调队列中取出回调函数并将其推入调用栈中。

当我们的回调函数在调用栈中时，很明显可以理解接下来会发生什么。在函数内部，有一个简单的alert。

JavaScript setTimeout()函数的作用是什么

JavaScript

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

输出： 这是警告消息 **** 在3秒后由于setTimeout()方法触发。

JavaScript setTimeout()函数的作用是什么

注意： 只有在JS引擎的调用堆栈为空时，事件循环才会将回调函数推入调用堆栈中。setTimeout()提供的函数不需要在给定的毫秒数后立即执行，这是浏览器将该函数入队到回调队列中的最小时间，无法预知它需要等待多长时间才能推入JS引擎调用堆栈。

示例2： 以下演示了只有在调用堆栈为空时，事件循环才会将函数推入调用堆栈中。

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

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

我们正在检查条件，如果currentTime小于expectedTime，则expectedTime保存的是currentTime+5。我们不断改变currentTime的值，使用Date.now()。当currentTime不再小于expectedTime时，循环中断。括号内的条件将在5秒后中断循环。我们的调用堆栈为空，没有任何要执行的内容，而等待此情况的事件循环将回调函数推入JS调用堆栈中。函数在调用堆栈中，因此很容易理解会发生什么，即执行嵌套函数中的console.log语句。您是否注意到while循环需要额外的5秒来执行代码，然后回调函数执行了！因为我们将setTimeout设置为1000毫秒，所以我们期望在1秒后执行回调函数。实际上，提供的毫秒数是函数进入回调队列的时间，函数只有在调用堆栈为空时才会在js调用堆栈中。

Javascript

<script> 
    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"); 
</script>

输出：

JavaScript setTimeout()函数的作用是什么