JavaScript 如何理解setTimeout()函数的各种代码片段

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

语法：

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

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

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

JavaScript

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

输出：

Hello from GFG

示例2： 假设我们的函数带有参数，那么我们可以以以下方式编写语法：

Javascript

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

输出：

Hi Anom, welcome to GeeksForGeeks!

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

示例3： 现在有一个问题，如果我们将定时器设置为0毫秒会怎样？让我们来看看：

Javascript

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

输出：

First
Some random function
Logging from 0ms wait timeout

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

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

JavaScript

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

输出：

解释： 如果我们执行上面的代码，我们期望它会打印出 0 1 2 3 。但实际上它会打印出 4 4 4 4 ，因为每次循环运行时，它都会在内存中存储对同一个 i 变量的引用。要解决这个问题，我们可以将变量类型‘ var ’更改为‘ let ’，它是一个块级作用域，它会在内存中的每次循环迭代中创建一个全新的 i 的副本。因此，setTimeout中的回调函数与每次迭代中的 i 变量形成了闭包。

改变变量类型‘var’为‘let’后的输出结果： ：

示例5： 但是可能会有时候，我们希望取消我们之前计划的超时。为了处理这个问题，我们在JavaScript中有一个 clearTimeout() 方法。让我们看看如何使用它：

JavaScript

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

输出：