介绍
「setTimeout()」和「setInterval()」都是文档对象模型上的全球对象的内置方法,可在指定时间安排任务。「setTimeout()」在指定延迟后呼叫一次传入函数,而「setInterval()」则在指定时间连续召唤一个函数。
在本文中,您将了解如何在您的JavaScript项目中实施setTimeout()和setInterval()。
使用setTimeout()
setTimeout()方法接受两个参数:回调函数和毫秒延迟,并呼叫函数一次。
在index.js文件中,执行一个setTimeout()方法,并将一个匿名函数作为第一个参数,并以毫秒数作为第二个参数:
1[label index.js]
2setTimeout(() => {
3 console.log('Hello World!');
4}, 1000);
经过1000毫秒的延迟(相当于一秒),主机将打印Hello World!字符串。
您还可以定义一个函数在全球范围内,并将setTimeout()作为第一个参数。
在index.js文件中,在全球空间中定义一个函数,并通过setTimeout()方法中的函数标签:
1[label index.js]
2function greeting() {
3 console.log('Hello World!');
4}
5
6setTimeout(greeting, 1000);
在延迟一秒之后,控制台将登录Hello World!字符串。
<$>[注]
**注:**您不应该调用您将函数传入 setTimeout(). 相反,将函数标签插入为第一个参数
<$>
「setTimeout()」方法可以采取额外的可选参数,并在指定延迟后将这些参数传输到回调函数中。
1[label index.js]
2function animal(animalName, punctuation = '.') {
3 const name = animalName.charAt(0).toUpperCase() + animalName.slice(1);
4
5 console.log(`${name}`${punctuation});
6}
7
8setTimeout(animal, 2500, 'shark', '!');
在 2.5 秒后,控制台将打印Shark!消息,您setTimeout()方法中的附加参数将动物回调函数中的默认参数取代。
现在你已经审查了setTimeout()方法,让我们看看在JavaScript中创建非同步呼叫的另一种方法。
使用SETInterval()
类似于setTimeout(),setInterval()方法接受两种参数:一个调用函数和毫秒的延迟。该方法也接受额外的参数传入调用函数。
在index.js文件中,定义一个加倍数并记录值的函数:
1[label index.js]
2let i = 0;
3
4function increment() {
5 i++;
6 console.log(i);
7}
8
9setInterval(increment, 1000);
将增量回调函数传入您的设置Interval()方法,将每隔一秒钟重复运行您的代码,并将每一个接下来的号码打印到控制台上。
1[secondary_label Output]
21
32
43
5...
由于setInterval()对每一次连接的呼叫都适用延迟,所以让我们考虑在何时使用该方法超过setTimeout()。
使用 setTimeout() 重复使用
要对指定延迟的开始进行更大控制,您可以使用setTimeout()方法反复使用,而不是setInterval()。
在index.js文件中,定义一个加倍数的函数,并应用重复性setTimeout()方法:
1[label index.js]
2let i = 0;
3
4function increment() {
5 i++;
6 console.log(i);
7}
8
9let timer = setTimeout(function myTimer() {
10 increment();
11 timer = setTimeout(myTimer, 1000);
12}, 1000);
注意您如何在setTimeout()方法的第一个调用体内定义回调函数myTimer。变量timer将其值重新分配给setTimeout()方法的第二次调用,并在调用方法并将myTimer函数作为第一个参数时创建回归方法。
现在你已经分析了整合这两种方法的方法,让我们看看如何终止呼叫。
使用「clearTimeout()」和「clearInterval()」
若要取消setTimeout()方法,您可以使用clearTimeout()方法,该方法通过了您的setTimeout()呼叫体内。
在index.js文件中,定义一个函数,并在呼叫的体内通过clearTimeout()方法到setTimeout():
1[label index.js]
2function animal(animalName, punctuation = '.') {
3 const name = animalName.charAt(0).toUpperCase() + animalName.slice(1);
4
5 console.log(`${name}${punctuation}`);
6}
7
8const animalTimer = setTimeout(animal, 800, 'shark', '!');
9
10setTimeout(() => {
11 clearTimeout(animalTimer);
12}, 250);
变量 animalTimer 将其值分配给 setTimeout() 方法,您的 animal 函数作为回调,并分配给第二个参数,延迟为 800 毫秒。
您的第二次调用setTimeout()方法接受匿名函数体内的clearTimeout()方法,并且延迟为250毫秒。当您设置clearTimeout()方法时,不会有任何值登录到控制台,因为方法调用和250毫秒延迟都会取消animalTimer变量中的值。
若要取消 setInterval() 方法,您可以应用 clearInterval() 方法. 与 clearTimeout() 类似, clearInterval() 方法接受调用函数作为参数。
在您的「index.js」文件中,使用在呼叫的体内使用「clearTimeout()」方法到「setInterval()」:
1[label index.js]
2let i = 0;
3
4function increment() {
5 i++;
6 console.log(i);
7}
8
9const incrementTimer = setInterval(increment, 1000);
10
11setInterval(() => {
12 clearInterval(incrementTimer);
13}, 3000)
在这里,变量incrementTimer()将调用setInterval()作为其值。第二次调用你的setInterval()方法定义了一个匿名函数并设置了3000毫秒的延迟。
结论
在这篇文章中,您了解到,因为JavaScript 会读取代码一行一行,所以setTimeout()和setInterval()的方法为您提供了无同步地运行代码的解决方案,并且您的函数按您的判断调用时间。
setInterval() 會在指定時間內連續執行。 setTimeout() 執行一次,但可用於回應等待回應,以表示何時該等待再次執行。