任务队列异步函数节流

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()
上一篇下一篇

猜你喜欢

热点阅读