定时器:
JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成
setTimeout()
setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行。它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器。
setTimeout(function (){console.log(2)},1000);
setInterval()
setInterval函数的用法与setTimeout完全一致,区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次,也就是无限次的定时执行。
var i = 1
var timer = setInterval(function() {
console.log(i++);
}, 1000);
clearTimeout(),clearInterval()
etTimeout和setInterval函数,都返回一个表示计数器编号的整数值,将该整数传入clearTimeout和clearInterval函数,就可以取消对应的定时器。
var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);
clearTimeout(id1);
clearInterval(id2);
运行机制
下面这段代码输出结果是? 为什么?
var a = 1;
setTimeout(function(){
a = 2;
console.log(a);//1
}, 0);
var a ;
console.log(a);//3
a = 3;
console.log(a);//2
定时器为异步任务,先挂起,将代码移出本次执行,放入任务队列,等到下一轮Event Loop时,再检查是否到了指定时间。如果到了,就执行对应的代码;即必须等到本次执行的所有代码(同步任务)都执行完,才会执行setTimeout指定的代码(任务队列)
,先输出10个1,再执行定时器函数,输出hi;
setTimeout(()=>{console.log("hi")
},3000)
console.log(1)
console.log(1)
console.log(1)
console.log(1)
console.log(1)
console.log(1)
console.log(1)
console.log(1)
console.log(1)
console.log(1)
console.log(1)
,先输出1,3,再执行定时器函数,输出2;
var flag = true;
setTimeout(function(){
flag = false;
},0)
while(flag){}
console.log(flag);
一直输出true;陷入死循环;
定时器为异步任务,先挂起,将代码移出本次执行,放入任务队列,等到下一轮Event Loop时,再检查是否到了指定时间。如果到了,就执行对应的代码;即必须等到本次执行的所有代码(同步任务)都执行完,才会执行setTimeout指定的代码(任务队列),先执行while语句,flag为真,一直循环输出true;
范例:
实现一个节流函数。
一定时间内,重复执行同一函数,以最后一次为准
function throttle(delay){
var timer=null;
return function(){
clearTimeout(timer);
timer=setTimeout(function(){
console.log("hello");
},delay);
};
}
var fn=throttle(10000);
fn();
fn();
fn();//hello
作者:彭荣辉
链接:https://www.jianshu.com/u/0f804364a8a8
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。