定时器JS深入理解解读
set&clear interval&timeout
相信不论是老油条还是新手小白,你早就听过或者用过setInterval和setTimeout这俩哥们儿和他们的死敌clearInterval和clearTimeout了吧,作为项目里的“老面孔”和面试高频考点,今天GJ504b就带大家深入解读这四大活宝😀
setInterval/setTimeout的统一语法
setInterval/setTimeout(函数,毫秒数)
这里的函数可以是匿名函数,IFFE
注意:函数是由定时器执行的,所以只写函数名【函数名+() 代表直接执行,相当于定时器写了个寂寞】
Talking is cheap,show u the codes!
function example(){
document.write(Haha);
}
//example();//这样写函数已经被调用了,你定时器将失效哦~
setInterval(example,1000);//right!
预备知识
JS是一个单线程的家伙
-
啥是单线程?
嘻嘻,又到了学习语文的时候啦单线程☞同一时间只能做一件事情,也就是说,所有的任务需要排队,前一个任务执行完后,才可以执行下一个任务
有事件队列和主线程,其中事件队列包括:定时器,ajax等等,他们遵循先进先出的原则,而主线程则第一按序执行
-
为什么它要有单线程属性?
为了提高用户体验感
你也不想自己的操作被程序多线程操作之后由于顺序的随机而面目全非吧😀 -
我知道这个有啥用?
maybe 面试会被问到┏┛墓┗┓...(((m -__-)m
多知道一点准没坏处滴,将来也好看AI的代码👻
setInterval
HR:setInterval是什么意思?
U:指-->间歇调用,调用后,将定时任务处理的函数添加到执行队列的队尾
说人话就是调用函数每n次(n是你规定的毫秒数)
Talking is cheap,show u the codes!
function example(){
document.write("我每隔一秒出现一次~");
}
setInterval(example,1000);
setTimeout
HR:setTimeout是什么意思?
U:指-->超时调用,调用后,将定时任务处理的函数添加到执行队列的队尾
说人话就是过了n后,调用一次你的函数(n是你规定的毫秒数)
function example(){
document.write("我1s之后只出现一次~");
}
setInterval(example,1000);
clearInterval和clearTimeout语法
先把之前写的set某某赋给一个变量x
然后
结合事件执行(比如点击按钮[btn]清除间歇调用)
btn.onclick = function(){ clearInterval(x); }
btn.onclick = function(){ clearTimeout(x); }
clearInterval
clearTimeout
你大概懂了?来看看3道面试题
(1)执行几次?输出结果?
for (var i=0; i<5; i++){
setTimeout(function(){
console.log(i);
},1000);
}
(2)这个函数的功能是什么?
for(let i=0; i<3; i++){
setTimeout(function(){
console.log(i);
},1000*i);
}
(3)输出结果?
setTimeout(function(){
console.log("a");
},0);
console.log("b")
setTimeout(function(){
console.log("c");
},0);
答案(1)打印5次5//这里由于var是全局变量,变量提升,但是如果改成ES6标准的let就是输出 0 1 2 3 4
(2)每个1s打印1, 2, 3.....//同理,如果改成var,就是打印3次3
(3)b a c
以上参考bilibiliup主,前端老猫