任务队列异步函数节流
2017-09-23 本文已影响0人
流着万条永远的河
异步和回调
function f1(callback){
setTimeout(function(){
console.log('别急,开始执行f1')
for(var i=0;i<10000;i++){
}
console.log('f1执行完了')
callback()
},0)
}
function f2(){
console.log('执行f2')
}
function f3(){
console.log('执行f3')
}
f1()
f2()
f3()
//结果是:"执行f2"
"执行f3"
"别急,开始执行f1"
"f1执行完了"
//还是先同步执行,再任务队列执行。
假设,我这个f1必须要最先开始执行,比如向服务器发请求,要数据。但是f1是异步的,立刻执行f2,但是这时候还没要到数据,数据到了,f2已经执行完了。
怎么办呢?
回调。在f1里做个参数,比如叫callback,当异步处理完成后,把这个参数作为函数执行,比如callback(),这时候,运行的指令也会变化:f1(f2),就是当f1执行完了,再去执行f2。
很多异步函数里都有回调函数,当f1执行后,得到数据或者什么结果,再去执行f2。
function f1(callback){
setTimeout(function(){
console.log('别急,开始执行f1')
for(var i=0;i<10000;i++){
}
console.log('f1执行完了')
callback(i)
},0)
}
f1(function(value){
console.log(value)
})
//callback函数就是function(value){
console.log(value)
},也就是callback(i)
回调函数就是为了写的更好看,更方便。
函数节流
有些功能做的很频繁,比如说侦听用户滚动,然后做一些事情,触发滚动几十次,但是不希望函数执行几十次,只是希望不滚动了,再执行。
搜索引擎,用户在输入东西时,下面自动会有提示,可写一个字母就有提示,我希望在用户输入过程中不智能匹配,直到我最后不输入了,或者我两秒内没有输入字符,再匹配。前面连续输入了,就不再智能匹配了。
var timer
function hiFrequency(){
if(timer){
clearTimeout(timer)
} //false,所以不执行。直到300 毫秒后为真了,执行,清除计时器。
//如果,300毫秒内,又执行了,这时候timer有值了,值从上一次在任务序列等待执行中得到的赋值,
//就清除定时器了,就清除了上次还没执行的了,直到300毫秒里没有执行操作,才能删除。
timer = setTimeout(function(){
console.log('do something')
},300) //刚开始放任务队列里,timer没值,flase,所以不清除定时器,300毫秒到了就输出‘do something’,被清除了就不输出了。
}
hifRequency()
如图
一直执行,就一直不输出do something。
函数节流,先去判断定时器是不是有了,没有就在设置一个,有了就把上一次的清除掉,重新设置,免得上一次的给这次的赋值了。
改造,封装:
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) //想要的效果是一秒内连续操作fn,就会不执行定时器
fn2()
fn2()
fn2()