JS延时1秒|极客笔记

JS延时1秒

在前端开发中，我们经常会遇到需要延时执行某个操作的情况。比如在用户进行某个操作后，需要等待一段时间再执行下一个操作，或者在页面加载完成后，需要延时几秒再展示某个元素。在JavaScript中，我们可以使用setTimeout函数来实现延时操作。

setTimeout函数

setTimeout是JavaScript中的一个内置函数，用来设置一个定时器，让指定的代码在一段时间之后执行。setTimeout函数的语法如下：

setTimeout(function, milliseconds);

其中，function是要执行的函数，可以是一个普通的函数，也可以是一个匿名函数；milliseconds是延时的毫秒数，也就是多长时间之后执行该函数。

下面是一个简单的示例，演示如何使用setTimeout函数实现延时1秒执行某个操作：

// 定义一个函数，在1秒后执行
function delayedFunction() {
    console.log('延时1秒后执行的操作');
}

// 调用setTimeout函数
setTimeout(delayedFunction, 1000);

在上面的示例中，我们定义了一个名为delayedFunction的函数，在函数中打印了一条消息。然后使用setTimeout函数设置了一个定时器，在1秒钟后执行delayedFunction函数。当代码被执行时，会在控制台输出延时1秒后执行的操作。

延时操作在实际开发中经常会用到，比如在网络请求的响应之后再执行某个操作，或者在用户操作之后延时提示。使用setTimeout函数可以很方便地实现这种延时需求。

延时效果优化

在实际开发中，有时候我们会遇到多次调用延时函数的情况，如果每次都新建一个定时器可能会使代码变得混乱。为了优化延时效果，我们可以使用递归调用的方式来实现多次延时执行。

下面是一个示例代码，演示如何使用递归调用的方式实现延时效果：

// 定义一个计数器
let count = 0;

// 定义一个函数，每秒递增计数值，直到10
function delayedFunction() {
    console.log('当前计数值为：', count);
    count++;

    // 判断计数值是否达到目标值
    if (count <= 10) {
        setTimeout(delayedFunction, 1000);
    } else {
        console.log('延时操作完成');
    }
}

// 调用延时函数
setTimeout(delayedFunction, 1000);

在上面的示例中，我们定义了一个计数器count，并通过递归调用的方式实现了每隔1秒递增计数值，直到达到目标值10为止。当计数值达到10之后，打印出延时操作完成的提示。

使用递归调用的方式实现延时效果可以更灵活地控制延时执行的次数和间隔，以及在每次延时执行时所做的操作。