如何理解 JavaScript 中 setTimeout()函数的各种片段？

在处理 JavaScript 时，有时您希望在特定时间段后运行一个函数。为此，我们使用setTimeout() ，这是一种设置定时器的异步方法，一旦定时器到期，它就会执行函数或指定的代码片段。在本文中，我们将探讨几个关于如何使用 setTimeout 的代码片段。

句法：

setTimeout(() => {
 // Your function which will execute after  
 // 5000 milliseconds
}, 5000);

我们看到数字 5000 是指它将等待执行函数的毫秒数。在 setTimeout() 方法中，我们声明了一个将在 5000 毫秒后执行的回调函数。

示例 1：我们也可以通过以下方式传递我们的函数：

Javascript

    const greetFunc = () => {
      console.log('Hello from GFG');
    };
      
    //Greet after 5000 milliseconds
    setTimeout(greetFunc, 5000);

输出：

例2：假设我们的函数有参数，那么我们可以这样写语法：

Javascript

    const greetFunc = (name, company) => {
      console.log(`Hi ${name}, welcome to ${company}!`);
    };
      
    setTimeout(greetFunc, 5000, 'Anom', 'GeeksForGeeks');

输出：

我们可以看到，函数props 是在 timeout 参数之后传递的。

例 3：现在出现一个问题，如果我们将定时器设置为 0 毫秒呢？让我们来了解一下：

Javascript

    setTimeout(() => {
      console.log('Logging from 0ms wait timeout');
    }, 0);
      
    console.log('First');
      
    const randFunction = () => {
      console.log('Some random function');
    };
      
    randFunction();

输出：

解释：我们可以看到，即使在代码中以 0ms 的等待时间提前声明了 setTimeout()，它仍然会在最后执行。这是因为，尽管延迟为零，但 setTimeout 会排队并安排在下一个可用机会时运行，而不是立即运行。因为当前运行的代码必须在调用队列函数之前完成。

示例 4：让我们看看，如果我们在循环中使用 setTimeout 会发生什么： 在下面的函数中，我们试图在i毫秒后控制台记录一个变量i 。

Javascript

    const print = () => {
        for (var i = 0; i < 4; i++){
            setTimeout(() => {
                console.log(i);
            }, i*1000);
        }
    }
      
    print();

输出：

解释：如果我们执行上面的代码，我们会期望它打印0 1 2 3。但它会打印4 4 4 4，因为每次运行循环时，它都会在内存空间中存储对同一个i变量的引用.为了克服这个问题，如果我们将变量类型“ var ”更改为“ let ”，它是一个块作用域，它将在内存空间中的每次循环迭代时创建一个全新的i副本。因此，setTimeout 中的回调函数在每次迭代时与i变量形成一个闭包。要了解更多关于闭包的信息，请阅读这篇文章：https://www.geeksforgeeks.org/closure-in-javascript/

将变量类型 'var' 更改为 'let' 后的输出：

示例 5：但是有时我们想取消我们已经计划好的超时。为了解决这个问题，我们在 JavaScript 中有一个clearTimeout()方法。让我们看看如何使用它：

Javascript

    const greetFunc = setTimeout(() => {
      console.log(`Hello from GeeksForGeeks`);
    }, 5000);
      
    clearTimeout(greetFunc);

输出：

没有显示输出，因为我们已经使用clearTimeout()取消了 setTimeout