实现 JavaScript 的延期执行或重复执行,常用两个函数:setTimeout 和 setInterval。以下是详细攻略:
setTimeout
函数可以延迟指定时间后执行一次函数。setTimeout
函数返回一个 ID,我们可以通过该 ID 来取消该执行任务。// 三秒后输出 'Hello, World!'
setTimeout(function() {
console.log('Hello, World!');
}, 3000);
上述代码会在 3 秒后执行一次函数,输出 'Hello, World!' 字符串。
// 通过 clearTimeout 取消执行任务
var taskId = setTimeout(function() {
console.log('Task will be canceled');
}, 3000);
// 通过 clearTimeout 函数取消该任务
clearTimeout(taskId);
上述代码通过 setTimeout
函数创建了一个 ID 为 taskId
的任务,该任务将在 3 秒后输出 "Task will be canceled"。但是我们通过 clearTimeout
函数取消了该执行任务,所以该任务不会被执行。
setInterval
函数可以按照指定的时间间隔重复执行指定的函数。setInterval
函数也返回一个 ID,我们可以通过该 ID 来取消执行任务。// 每秒输出一次当前时间
var intervalId = setInterval(function() {
console.log(new Date());
}, 1000);
上述代码创建了一个 ID 为 intervalId
的任务,该任务每秒钟会输出当前时间。
// 通过 clearInterval 取消执行任务
var i = 0;
var intervalId = setInterval(function() {
console.log(i++);
}, 1000);
// 5 秒钟后通过 clearInterval 函数取消该任务
setTimeout(function() {
clearInterval(intervalId);
}, 5000);
上述代码创建了一个 ID 为 intervalId
的任务,该任务每秒钟会输出一个数字并递增。但是我们通过 setTimeout
函数等待 5 秒钟后,使用 clearInterval
函数取消了该执行任务,因此该任务将不再重复执行。
综上所述,我们可以使用 setTimeout
和 setInterval
函数完成 JavaScript 的延期执行和重复执行任务。