js中setTimeout的用法|极客笔记

js中setTimeout的用法

在JavaScript中，setTimeout函数是一个常用的定时器函数，用来在指定的延迟时间后执行一段代码。setTimeout函数有两个参数：要执行的函数和延迟的时间（以毫秒为单位）。下面将详细介绍setTimeout函数的用法和示例代码。

基本用法

setTimeout函数的基本语法如下：

setTimeout(function, delay);

其中，function是要执行的函数，可以是匿名函数或函数名。delay是延迟的时间，以毫秒为单位。当delay为0时，函数会立即执行。

下面是一个简单的示例，演示了如何在延迟1秒后输出一段文字：

setTimeout(function() {
  console.log('Hello, world!');
}, 1000);

在上面的示例中，setTimeout函数会在1秒后执行匿名函数，函数会打印出Hello, world!。

传递参数

除了执行一段代码外，setTimeout函数还可以传递参数给要执行的函数。可以在setTimeout函数后的参数中传递，如下所示：

function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

setTimeout(sayHello, 1000, 'Alice');

在上面的示例中，sayHello函数会在1秒后执行，同时传入参数'Alice'。

清除定时器

使用setTimeout函数时，有时候需要在特定条件下清除定时器。可以使用clearTimeout函数来清除已经设定的setTimeout。

let timeoutId = setTimeout(function() {
  console.log('This will never be printed!');
}, 500);

clearTimeout(timeoutId);

在上面的示例中，setTimeout函数设置了一个延迟为500毫秒的定时器，但是在之后立即使用clearTimeout将其清除，所以函数体内的内容永远不会被打印出。

嵌套使用

setTimeout函数也可以嵌套使用，实现多次延时执行。下面的示例演示了如何实现定时输出1、2、3：

let count = 1;

function printNumber() {
  console.log(count);
  count++;

  if (count <= 3) {
    setTimeout(printNumber, 1000);
  }
}

printNumber();

在上面的示例中，printNumber函数会在延迟1秒后执行，并打印出count的值。当count小于等于3时，会再次调用setTimeout函数，实现多次延时执行的效果。

示例代码运行结果

下面是上面示例代码的运行结果：

输出Hello, world!：

Hello, world!

延时1秒后输出Hello, Alice!：

Hello, Alice!

清除定时器：

（无输出）

嵌套使用延迟输出1、2、3：

1
2
3

以上是关于JavaScript中setTimeout函数的用法。

js中setTimeout的用法