📜  Javascript setTimeout()

📅  最后修改于: 2020-09-27 07:40:09             🧑  作者: Mango

在本教程中,您将在示例的帮助下了解JavaScript setTimeout()方法。

setTimeout()方法在指定时间后执行代码块。该方法仅执行一次代码。

JavaScript setTimeout的常用语法为:

setTimeout(function, milliseconds);

其参数为:

  • 函数 -包含代码块的函数
  • 毫秒 – 函数执行的时间

setTimeout()方法返回一个intervalID ,它是一个正整数。


示例1:3秒后显示一次文本

// program to display a text using setTimeout method
function greet() {
    console.log('Hello world');
}

setTimeout(greet, 3000);
console.log('This message is shown first');

输出

This message is shown first
Hello world

在上面的程序中, setTimeout()方法在3000毫秒( 3秒)后调用greet() 函数 。

因此,该程序仅在3秒后显示一次文本Hello world

注意 :如果要在一段时间后执行一次块,则setTimeout()方法很有用。例如,在指定时间后向用户显示消息。

setTimeout()方法返回时间间隔ID。例如,

// program to display a text using setTimeout method
function greet() {
    console.log('Hello world');
}

let intervalId = setTimeout(greet, 3000);
console.log('Id: ' + intervalId);   

输出

Id: 3
Hello world

示例2:每3秒显示一次时间

// program to display time every 3 seconds
function showTime() {

    // return new date and time
    let dateTime= new Date();

    // returns the current local time
    let time = dateTime.toLocaleTimeString();

    console.log(time)

    // display the time after 3 seconds
     setTimeout(showTime, 3000);
}

// calling the function
showTime();

输出

5:45:39 PM
5:45:43 PM
5:45:47 PM
5:45:50 PM
..................

上面的程序每3秒显示一次时间。

setTimeout()方法仅在时间间隔(此处为3秒)之后调用一次该函数 。

但是,在上述程序中,由于函数正在调用自身,因此程序每3秒显示一次时间。

该程序将无限期运行(直到内存用完)。

注意 :如果您需要多次执行一个函数 ,最好使用setInterval()方法。


JavaScript clearTimeout()

如上例所示,程序在指定的时间间隔后执行一段代码。如果要停止此函数调用,可以使用clearTimeout()方法。

clearTimeout()方法的语法为:

clearTimeout(intervalID);

在这里, intervalIDsetTimeout()方法的返回值。


示例3:使用clearTimeout()方法

// program to stop the setTimeout() method

let count = 0;

// function creation
function increaseCount(){

    // increasing the count by 1
    count += 1;
    console.log(count)
}

let id = setTimeout(increaseCount, 3000);

// clearTimeout
clearTimeout(id); 
console.log('setTimeout is stopped.');

输出

setTimeout is stopped.

在上面的程序中, setTimeout()方法用于在3秒后增加count的值。但是, clearTimeout()方法停止setTimeout()方法的函数调用。因此, 数值不增加。

注意 :通常,当需要取消setTimeout()方法调用之前,通常可以使用clearTimeout()方法。


您还可以将其他参数传递给setTimeout()方法。语法为:

setTimeout(function, milliseconds, parameter1, ....paramenterN);

当您将其他参数传递给setTimeout()方法时,这些参数( parameter1parameter2等)将传递给指定的函数

例如,

// program to display a name
function greet(name, lastName) {
    console.log('Hello' + ' ' + name + ' ' + lastName);
}

// passing argument to setTimeout
setTimeout(greet, 1000, 'John', 'Doe');

输出

Hello John Doe

在上面的程序中,将两个参数JohnDoe传递给setTimeout()方法。这两个参数是将传递给setTimeout()方法内部定义的函数的参数。


推荐读物: JavaScript async()和await()