js setTimeout()的用法详解|极客笔记

js setTimeout()的用法详解

在JavaScript中，setTimeout()是一个用于执行一段代码或者函数在一定延迟时间后执行的函数。setTimeout()的用法非常灵活，可以用来实现定时器、延迟执行、轮询等功能。本文将详细介绍setTimeout()的用法及相关注意事项。

基本语法

setTimeout()函数的基本语法如下：

setTimeout(function, delay)

function：要执行的函数或者代码块。
delay：延迟时间，单位为毫秒。

使用示例

下面是一个简单的示例，我们使用setTimeout()函数在延迟2秒后输出一段文字：

setTimeout(function() {
  console.log("Hello, setTimeout!");
}, 2000);

运行上面的代码，我们会在控制台中看到Hello, setTimeout!这段文字在2秒后输出。

注意事项

this指向问题

在使用setTimeout()函数时，需要注意其中的回调函数内部的this指向。由于setTimeout()是在全局作用域中执行的，所以回调函数内部的this指向的是全局对象window。如果需要在回调函数内部使用外部作用域的this，可以通过箭头函数来解决这个问题。

const obj = {
  name: "Alice",
  greet: function() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}!`);
    }, 1000);
  }
};

obj.greet();

在上面的示例中，我们使用了箭头函数来包裹setTimeout()的回调函数，确保了回调函数内部的this指向的是外部作用域的obj对象。

多次调用问题

当多次调用setTimeout()函数时，需要注意每次调用的延迟时间的累积效应。由于JavaScript是单线程的，如果一个setTimeout()的延迟时间设置为1000毫秒，而另一个setTimeout()的延迟时间设置为2000毫秒，那么第二个setTimeout()将在第一个setTimeout()执行完成之后的2000毫秒后执行，而不是1000毫秒后。

setTimeout(function() {
  console.log("First setTimeout");
}, 1000);

setTimeout(function() {
  console.log("Second setTimeout");
}, 2000);

运行上面的代码，我们会先看到First setTimeout输出，然后再看到Second setTimeout输出。

定时器

除了一次性执行一段代码外，setTimeout()函数还可以用来创建定时器，实现周期性执行某段代码的功能。下面是一个简单的示例，我们使用setTimeout()实现了每隔1秒输出一次当前时间的功能。

function printTime() {
  console.log(new Date());
}

function startTimer() {
  printTime();
  setTimeout(startTimer, 1000);
}

startTimer();

在上面的代码中，我们定义了printTime()函数用于输出当前时间，然后定义了startTimer()函数，在每次执行后调用setTimeout()定时器，实现了每隔1秒输出一次当前时间的效果。

总结

通过本文的详细介绍，我们了解了JavaScript中setTimeout()函数的基本用法及注意事项。setTimeout()函数是一个功能强大的工具，可以帮助我们实现定时器、延迟执行等功能。在使用setTimeout()函数时，需要注意回调函数内部的this指向问题以及多次调用的延迟时间累积效应。