关于setTimeout与setInterval的使用与区别
window.setTimeout与window.setInterval
概念: window.setTimeout()是一个定时器,该定时器在定时器到期后执行一个函数或指定的一段代码。返回一个 timerID。window.setInterval()是一个间断执行的定时器,可以叫间隔器,是重复调用一个函数或执行一个代码段,在每次调用之间具有固定的时间延迟。返回一个 intervalID。通过clearTimeout与clearInterval可以分别清除定时器和间隔器,从而停止执行。
使用方式:
setTimeout (表达式, 延时时间)
setInterval(表达式, 交互时间)
延时时间/交互时间是以豪秒为单位的(1000ms=1s)
两者区别:
setTimeout()方法是在等待指定时间后执行函数内容, 且只执行一次传入的表达式。
setInterval()方法是每指定间隔时间后执行一次传入的表达式,循环执行直至关闭窗口或clearInterval()。
setTimeout用于延迟执行:
let x = 1;
setTimeout(() => x++, 0);
console.log(x);
若在控制台输出,也就是异步调用时会获得2
setInterval用于间隔执行:
let x = 1;
var interval1 = setInterval(() => x++, 1000);
console.log(x);
若异步调用时,每个1秒会发现x增1
下面是一些例子,如果能你能理解其中的意思,那么就可以说会用了。
1. 简单例子
let a = 1;
let timerId = setTimeout(function() {
a++;
console.log('inner:', a);
},0);
console.log('outer:', a);
2. 延迟执行
let i = 0;
while(i < 10) {
setTimeout(function() {
console.log(i);
}, 1);
i++;
}
3 .串行改并行执行
let data = [];
for(let i = 0; i <= 999; i++) {
data[i] = {
number: Math.random()
}
};
for (let item of data) {
console.time();
setTimeout(function() {
item.number += 1;
}, 0);
setTimeout(function() {
item.id = 'id:' + item.number;
}, 0);
console.timeEnd();
}
// 当数据操作步骤太复杂,步数太多时,可以让一些操作异步来执行,这样浏览器不至于阻塞于此而卡死,可以把同步变异步延迟下计算,这样可以解决复杂运算问题。也可以利用Promise来实现类似功能
4. 移开浮层关闭
ele.addEventListener('click', function() {
setTimeout(
function() {
$ele.hide();
}
, 500)
}, false);
// 这是延迟执行与DOM结合的例子,不想让事件执行后马上得到结果,而是延迟一段时间之后执行。
4. DOM动画
var interval2 = setInterval(function() {
if (ele.style.left < screen.width) {
ele.style.left = ele.style.left + 10 + 'px';
} else { clearInterval(interval2); }
}, 20);
// JS做动画就离不开定时器和间隔执行器。相比来讲,动画用间隔较好,但是要记住满足条件后清除掉间隔器。
// 这里只是示例用法,真实动画需要自己微调
5. 测验题,结合作用域,看下你能回答正确并能说出结果以及顺序的原因来吗?
test1:
function callback(a){
return function(){
alert("Hello " + a);
}
}
let a = "world";
setTimeout(callback(a), 1000);
a = "你好";
test2:
function callback(a){
return function(){
alert("Hello " + a);
}
}
let a = "world";
setTimeout(function() {
callback(a)();
}, 1000);
a = "你好";
如果你都能回答正确,那么setTimeout与setInterval用法就全掌握了哦。
setTimeout 和 setInterval 的区别,包含内存方面的分析
setTimeout 与 setInterval
setTimeout 表示间隔一段时间之后执行一次调用,而 setInterval 则是每间隔一段时间循环调用,直至 clearInterval 结束。
内存方面,setTimeout 只需要进入一次队列,不会造成内存溢出,setInterval 因为不计算代码时间,有可能通知执行多次代码,导致内存溢出。
相关问答
settimeout 和 setinterval 的区别?1.settimeout和setinterval是JavaScript中的两个定时器函数。2.settimeout是一个在指定的时间后执行一次的函数,而setinterval是一个每隔指定时间重复...
Javascript中 setTimeOut 和 setInterval 的定时器用法?JavaScript计时器计时器类型:一次性计时器(setTimeout):仅在指定的延迟时间之后触发一次。间隔性触发计时器(setInterval):每隔一定的时间间隔就触发一次。...
自己做的页面怎么让页面上的字动起来?.animated-text{animation:slide-in2sease-in-outinfinite;}```2.使用JavaScript:...
两张图文有节奏的切换怎么做?2.使用JavaScript控制:在页面中使用JavaScript编写代码,通过定时器或者其他方式控制两张图文的切换。可以使用setTimeout函数、setInterval函数等实现...
网络适配器选项中的InterruptModeration是什么意思?Toreducethenumberofinterrupts,manyNICsuseinterruptmoderation.Withinterruptmoderation,t...
【 time 的用法】作业帮[最佳回答]time[taim]n.时间,时侯,时机,节拍,期限,次数,时期,比赛限时vt.安排...的时间,记录...的时间,计时,定时vi.打拍子,(...)合拍adj.时间的,...
js定时器有哪些?分别是什么执行效果?setTimeout只执行一次setInterval会一直重复执行setTimeout只执行一次setInterval会一直重复执行
linux运维,超时连接配置tmout和sshd_config中ClientAlive Interval 参数配置有何区别?行业问题这个其实是shell环境和ssh会话的问题,问题看似简单,其实说起来,话题很长。首先解答问题中两者的区别,然后对ssh会话和shell环境的关系、ssh会...Clien...
“比赛”的英文是什么 - CHIN 的回答 - 懂得比赛[bǐsài]match[athleticorother]competitionmatch[athleticorother]competition例句与用法:他们试图预测这场足球比赛...
排球专业术语的英语表达?aset一局atwopointlead领先两分accuratewithaforearmpass上手传球很到位actionofblocking拦网advantage...