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);
在这里, intervalID
是setTimeout()
方法的返回值。
示例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()
方法时,这些参数( parameter1
, parameter2
等)将传递给指定的函数 。
例如,
// 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
在上面的程序中,将两个参数John
和Doe
传递给setTimeout()
方法。这两个参数是将传递给setTimeout()
方法内部定义的函数的参数。
推荐读物: JavaScript async()和await()