JavaScript 解释计时器的工作原理

在本文中，我们将详细讨论JavaScript中计时器的工作原理。

正如我们所知，JavaScript是一种异步和单线程的编程语言。这意味着只有一个调用栈，并且在该调用栈内逐一执行代码。

同步意味着代码逐一执行，单线程意味着我们只有一个主线程即调用栈。但我们也可以实现异步功能。

计时器 用于在特定时间间隔后执行某些任务。基本上，借助JavaScript中的计时器，我们可以延迟代码的执行。使用JavaScript中的计时器函数，我们还可以实现异步功能。

假设我们正在使用计时器函数延迟执行某个函数，那么当JavaScript引擎遇到它时，该函数将不会立即执行。它会被存储在其他地方，当计时器过期时，该函数将被执行。

JavaScript提供了两个函数来延迟执行任务，这些函数就是计时器函数。

• setTimeout函数
• setInterval函数

计时器在JavaScript中的工作原理： 现在让我们讨论一下计时器函数的实际运行方式。

我们将通过一个示例来理解。

示例：

Javascript

function print() { 
    console.log("Welcome to GFG"); 
} 
setTimeout(print, 5000); 
console.log("Hello World!");

输出：

Hello World!
Welcome to GFG

解释： 在这种情况下，非常有趣的是首先执行console.log(“Hello World!”)，然后执行setTimout。原因是当我们首次运行任何代码时，全局执行上下文被创建并推入堆栈中。因此，当遇到setTimout()时，它不会直接被推入调用栈中，而是被存储在WebAPIs环境中。

因为setTimout()函数不是JavaScript的一部分，它是浏览器提供的与外部环境交互的API。所以setTimeout是Web浏览器的一部分，不是JavaScript的一部分。

当JavaScript引擎遇到setTimeout时，它会被存储在WebAPIs环境中，并且JS引擎将继续执行下一行代码。因此，console.log(“Hello World!”)会首先执行。由于我们在全局作用域中执行了所有操作，所以全局执行上下文将从调用栈中弹出。

当5秒钟的定时器到期时，setTimeout会进入 任务队列 。

然后，事件循环开始工作，事件循环会不断检查调用栈是否为空。如果调用栈为空且我们有一个要在任务队列中执行的函数，事件循环会将该函数推入调用栈中。在我们的情况下，由于我们在全局作用域中执行了所有操作，所以全局执行上下文将从调用栈中弹出，并且我们的调用栈为空，任务队列中存在一个要执行的函数。

因此，事件循环会从任务队列中取出该函数，并将其推入调用栈中。结果是在5秒钟后， “Welcome to GFG” 会被打印出来。

setTimeout()函数： 它是浏览器提供的与外部环境交互的API。只有在我们完成了全局作用域中的所有操作后，它才会被推入调用栈并执行。

示例：

Javascript

function print() { 
    for(let i = 0; i <= 5; i++) { 
        setTimeout(() => { 
            console.log(i); 
        }, 2000); 
    } 
} 
print();

输出：

0
1
2
3
4
5

setInterval() 函数： 它被用于在给定的时间间隔后重复执行函数。我们需要停止这个函数，否则它将持续执行。

示例：

JavaScript

var count = 1; 
function print() { 
    console.log(count); 
    count++; 
} 
setInterval(print, 2000);

在这种情况下，它将会持续打印i的值。它不会停止，我们需要使用 clearInterval( ) 函数来明确停止它。

停止setInterval函数：

Javascript

var count = 1; 
function print() { 
    console.log(count); 
    count++; 
    if(count == 6) { 
        clearInterval(id); 
    } 
} 
  
let id = setInterval(print, 2000);

输出：

1
2
3
4
5

clearTimeout()函数： 用于停止setTimeout函数的执行。就像clearInterval()函数用于停止setInterval函数一样，我们可以使用clearTimeout函数来取消setTimeout函数的执行。

JavaScript

function sayHello() { 
    console.log("Hello world!"); 
} 
function stopTimer() { 
    clearTimeout(id); 
} 
const id = setTimeout(sayHello, 2000); 
console.log("This should be executed first"); 
stopTimer();

输出：

This should be executed first

clearTimeout（）函数已经停止执行setTimeout（）函数。

clearInterval函数： 正如我们所知，setInterval函数会在特定的时间间隔后继续执行函数。我们需要停止它。为了停止setInterval函数，我们使用clearInterval函数。

示例：

JavaScript

var count = 1; 
function sayHelloWorld() { 
    console.log("Hello World!"); 
    count = count+1; 
    if(count == 6) { 
        clearInterval(id); 
    } 
} 
let id = setInterval(sayHelloWorld, 2000);

输出：

Hello World!
Hello World!
Hello World!
Hello World!
Hello World!