JavaScript中的setTimeout()|极客笔记

JavaScript中的setTimeout()

在JavaScript中，setTimeout()是一种常用的定时器函数，用于延迟执行指定的代码片段。通过setTimeout()函数，我们可以在指定的时间后执行一段JavaScript代码，或者是每隔一定时间执行一段代码。

语法

setTimeout()函数的语法如下：

setTimeout(function, milliseconds, param1, param2, ...)

function：要执行的函数或者要执行的代码块。
milliseconds：延迟执行的时间，以毫秒为单位。
param1, param2, ...：可选参数，传递给函数的参数。

使用setTimeout()延迟执行代码

下面是一个简单的示例，演示了如何使用setTimeout()函数来延迟执行一段代码：

console.log("Start");

setTimeout(function(){
    console.log("Delayed code");
}, 2000); // 2秒后执行

console.log("End");

上述代码中，首先输出Start，然后两秒后输出Delayed code，最后输出End。这是因为console.log("End");语句会在setTimeout()函数执行之前输出。

使用setTimeout()定时执行代码

除了延迟执行代码外，setTimeout()函数还可以周期性地执行代码。下面是一个示例，演示了如何使用setTimeout()函数来每隔一段时间执行一段代码：

let count = 0;

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

    if(count > 5){
        clearTimeout(timer);
    }else{
        timer = setTimeout(printCount, 1000); // 每隔1秒执行
    }
}

let timer = setTimeout(printCount, 1000);

上述代码会每隔一秒输出一个数字，直到输出完毕。当count大于5时，清除定时器，停止输出。

使用setTimeout()传递参数

除了执行函数外，setTimeout()函数还可以传递参数给执行函数。下面是一个示例，演示了如何传递参数给setTimeout()函数：

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

let name = "Alice";
setTimeout(greet, 2000, name); // 2秒后执行，并传递name参数

上述代码中，函数greet()会在两秒后执行，并输出Hello, Alice!。

使用setTimeout()模拟setInterval()

尽管setInterval()函数也可以周期性地执行代码，但它倾向于将回调函数按固定延迟插入队列。而setTimeout()则更加可控，通过在回调函数内再次调用setTimeout()，可以模拟setInterval()的效果。

下面是一个示例，演示了如何使用setTimeout()来模拟setInterval()的效果：

let count = 0;

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

    if(count > 5){
        return;
    }

    setTimeout(printCount, 1000);
}

setTimeout(printCount, 1000);

上述代码每隔一秒输出一个数字，直到输出完毕。在回调函数内部再次调用setTimeout()，实现了类似setInterval()的效果。

清除定时器

在使用setTimeout()函数时，可以通过clearTimeout()函数来清除定时器。使用clearTimeout()函数可以取消未执行的setTimeout()函数，或停止正在执行的重复调用。

下面是一个示例，演示了如何通过clearTimeout()函数来清除定时器：

let timer = setTimeout(function(){
    console.log("This message will not be printed");
}, 2000);

// 1秒后清除定时器
setTimeout(function(){
    clearTimeout(timer);
    console.log("Timer cleared");
}, 1000);

上述代码中，第一个setTimeout()函数在两秒后会执行，但是在一秒后会被clearTimeout()函数清除，因此This message will not be printed不会被输出。

总结

setTimeout()函数是JavaScript中一个非常有用的定时器函数，可以用于延迟执行代码或周期性执行代码。通过传递函数、时间参数以及可选参数，setTimeout()函数提供了丰富的灵活性。同时，通过结合clearTimeout()函数，我们可以更加灵活地控制定时器的执行。通过灵活使用setTimeout()函数，我们可以在JavaScript中实现各种定时任务的功能。