关键词

Javascript中setTimeOut和setInterval的定时器用法

当我们在JavaScript中需要执行一些需要延迟执行的任务时,使用定时器是一个非常方便的方式。JavaScript提供了两个用于定时器的方法:setTimeOut和setInterval,它们都可以延迟一段时间后执行一段代码。

setTimeOut方法

setTimeOut方法函数会在延迟一定时间后调用一次指定的函数。

语法

setTimeout(function, delay, param1, param2, ...)
  • function:需要执行的函数
  • delay:延迟时间,以毫秒为单位。如果省略,则默认为0
  • param1, param2, ...:可选参数,传递给要调用的函数的参数

示例1

下面是一个简单的setTimeout的示例,延迟1秒钟执行输出“Hello, world!”的代码:

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

示例2

我们可以使用setTimeout方法来实现一个简单的倒计时计时器:

// 显示倒计时残秒数
function showRemainingTime(remainingTimeInSecond) {
    console.log("倒计时:" + remainingTimeInSecond + "秒");

    if (remainingTimeInSecond > 0) {
        // 递归调用setTimeout方法,实现倒计时效果
        setTimeout(function() {
            showRemainingTime(remainingTimeInSecond - 1);
        }, 1000);
    } else {
        console.log("倒计时结束");
    }
}

showRemainingTime(10); // 倒计时10秒

setInterval方法

setInterval方法函数会按照指定的时间间隔重复调用指定的函数。

语法

setInterval(function, delay, param1, param2, ...)
  • function:需要执行的函数
  • delay:时间间隔,以毫秒为单位。如果省略,则默认为0
  • param1, param2, ...:可选参数,传递给要调用的函数的参数

setInterval会每隔一段时间调用一次指定的函数,直到我们显式地调用clearInterval方法来取消这个函数的调用。我们可以使用setInterval来实现周期性的任务,比如定时发送心跳包,轮询数据等。

示例3

下面是一个简单的setInterval示例,每隔3秒钟执行输出“Hello, world!”的代码:

setInterval(function(){
    console.log("Hello, world!");
}, 3000);

示例4

我们可以使用setInterval方法来实现一个简单的时钟效果:

// 显示当前时间
function showCurrentTime() {
    var currentTime = new Date();
    console.log("当前时间:" + currentTime.toLocaleTimeString());
}

setInterval(showCurrentTime, 1000); // 每隔1秒钟调用showCurrentTime方法,显示当前时间。

以上是Javascript中setTimeOut和setInterval的定时器用法的完整攻略,希望能对你有所帮助。

本文链接:http://task.lmcjl.com/news/9417.html

展开阅读全文