异步回调
有时候我们在需要执行一个任务时,需要等它执行完毕之后在执行后面的同步任务,用定时器就很难控制,这个时候就需要写一个回调函数
function f1(callback){
setTimeout(function(){
//做某件事,可能很久
console.log('别急,开始执行f1')
for(var i=0;i< 100000;i++){
}
console.log('f1执行完了')
callback()
}, 0);
}
function f2(){
console.log('执行f2');
}
function f3(){
console.log('执行f3');
}
f1(f2) //当f1执行完之后再执行 f2
f3()
函数节流(throttle)
事件的触发权很多时候都属于用户,有些情况下会产生问题:
- 向后台发送数据,用户频繁触发,对服务器造成压力
- 一些浏览器事件:window.onresize、window.mousemove等,触发的频率非常高,会造成浏览器性能问题
如果你碰到这些问题,那就需要用到函数节流和防抖了。
**函数节流:一个需要频繁触发的函数,在规定时间内,只让最后一次生效,前面的不生效。
1.如何实现
其原理就第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器,然后延迟一定时间再执行。
var timer;
function hiFrequency(){
if(timer){
clearTimeout(timer);
}
timer = setTimeout(function(){
console.log('do something')
}, 300);
}
hiFrequency()
hiFrequency()
hiFrequency()
当调用hiFrequency()
的时候,会进行一个判断,刚开始的时候变量timer
为undefind
的时候,就会执行定时器,在300毫秒输出console.log('do something')
。
当用户在300毫秒之内,又调用hiFrequency()
的时候,判断条件为有值的时候,会执行clearTimeout(timer)
,清除上一次的未执行的定时器,重新开始计时,永远只执行最后一次!
可以进行改写一下
function throttle(fn, delay) {
var timer = null
return function(){
clearTimeout(timer)
timer = setTimeout(function(){
fn(arguments)
}, delay)
}
}
function fn(){
console.log('hello ')
}
var fn2 = throttle(fn, 1000)
fn2()
fn2()
fn2()
和上面的是一样的
网友评论