javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > setInterval()和setTimeout()用法

JavaScript中setInterval()和setTimeout()的用法及区别

作者:乌 秋

这篇文章主要给大家介绍了关于JavaScript中setInterval()和setTimeout()用法及区别的相关资料,Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,需要的朋友可以参考下

一、setInterval()

1、setInterval() 是JavaScript的一个定时器函数,用于设置周期性的定时任务。它的语法如下:

setInterval(function, delay, param1, param2, …);

setInterval(function() {
  const now = new Date();
  console.log(now.toLocaleTimeString());
}, 1000);

二、setTimeout()

1、setTimeout也是一个定时器函数,它允许我们在指定的时间后执行一次函数。

setTimeout(function, delay, arg1, arg2, …)

// 延迟 1 秒后输出 "Hello, world!"
const timerId = setTimeout(() => {
  console.log("Hello, world!");
}, 1000);
// 取消定时器
clearTimeout(timerId);

这段代码定义了一个 setTimeout 定时器,它会在 1 秒后执行一个函数,输出字符串 “Hello,world!”。同时,它会将返回的计时器 ID 存储在变量 timerId 中。 接下来的一行代码调用了 clearTimeout 函数,并传timerId。这个函数会取消之前设置的定时器,从而避免了执行函数的操作。因此,这段代码最终不会输出任何内容。

三、setInterval()和setTimeout()的区别

setInterval() 和 setTimeout() 都是 JavaScript 中的定时器函数,但它们有以下几个区别:

1. setInterval() 在延迟指定时间后重复执行指定任务,直到被取消或页面关闭。而 setTimeout() 在延迟指定时间后执行指定任务,只执行一次;

2. setInterval() 的执行间隔时间是固定的,而 setTimeout() 可以动态调整延迟时间;

3. setInterval() 可能会存在累积性误差,因为它的执行时间是相对于上一次任务结束的时间计算的,如果执行的任务耗时超过了指定的时间间隔,就会出现累积性误差。而 setTimeout() 每次执行都是相对于上一次任务开始的时间计算的,不存在累积性误差;

4. setInterval() 可能会对性能产生影响,因为它会不断地重复执行指定任务,占用 CPU 资源。而 setTimeout() 只会在指定时间后执行一次任务,对性能影响较小。

因此,一般情况下,如果我们需要周期性地执行指定任务,就可以使用 setInterval();如果我们只需要在指定时间后执行一次任务,就可以使用 setTimeout()。

四、注意事项

使用setInterval()时要注意以下几点:

补充:常见的面试题

1、分析输出

for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(new Date, i);
}, 1000);
}

console.log(new Date, i);

输出:

5->5,5,5,5,5(->代表1s)

2018-08-14T08:20:05.694Z 5
2018-08-14T08:20:06.696Z 5
2018-08-14T08:20:06.697Z 5
2018-08-14T08:20:06.697Z 5
2018-08-14T08:20:06.698Z 5
2018-08-14T08:20:06.698Z 5

2、追问 1:闭包期望代码的输出变成:5 -> 0,1,2,3,4,该怎么改造代码?

方式一:

for (var i = 0; i < 5; i++) {
(function(j) { // j = i
setTimeout(function() {
console.log(new Date, j);
}, 1000);
})(i);
}

console.log(new Date, i);

方式二:

for (var i = 0; i < 5; i++) {
setTimeout(
(function (j) { // j = i
return function () {
console.log(new Date, j);
}
})(i), 1000);
}

console.log(new Date, i);

存在错误的方式三

for (let i = 0; i < 5; i++) {
setTimeout(function() {
console.log(new Date, i);
}, 1000);
}

console.log(new Date, i);//let,for循环外部访问不到i

追问 2:ES6

如果期望代码的输出变成 0 -> 1 -> 2 -> 3 -> 4 -> 5,并且要求原有的代码块中的循环和两处 console.log 不变,该怎么改造代码?

方式一:

for (var i = 0; i < 5; i++) {
(function(j) {
setTimeout(function() {
console.log(new Date, j);
}, 1000 * j); // 这里修改 0~4 的定时器时间
})(i);
}

setTimeout(function() { // 这里增加定时器,超时设置为 5 秒
console.log(new Date, i);
}, 1000 * i);

方式二:promise

var p= Promise.resolve()
for (var i = 0; i < 5; i++) {
(function(j){
p=p.then(setTimeout(function() {//p=p.then()相当于实现链式操作
console.log(new Date, j);
}, 1000*j )); // 这里修改 0~4 的定时器时间
})(i)

}

setTimeout(function(){
p.then(console.log(new Date, i))
}, 1000*i) ;

方式二:promise.all

const tasks = [];
for (var i = 0; i < 5; i++) { // 这里 i 的声明不能改成 let,如果要改该怎么做?
((j) => {
tasks.push(new Promise((resolve) => {
setTimeout(() => {
console.log(new Date, j);
resolve(); // 这里一定要 resolve,否则代码不会按预期 work
}, 1000 * j); // 定时器的超时时间逐步增加
}));
})(i);
}

Promise.all(tasks).then(() => {
setTimeout(() => {
console.log(new Date, i);
}, 1000); // 注意这里只需要把超时设置为 1 秒
});

总结 

到此这篇关于JavaScript中setInterval()和setTimeout()用法及区别的文章就介绍到这了,更多相关setInterval()和setTimeout()用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文