异步回调与函数节流

2019-04-03  本文已影响0人  缺月楼

异步回调

有时候我们在需要执行一个任务时,需要等它执行完毕之后在执行后面的同步任务,用定时器就很难控制,这个时候就需要写一个回调函数

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)

事件的触发权很多时候都属于用户,有些情况下会产生问题:

**函数节流:一个需要频繁触发的函数,在规定时间内,只让最后一次生效,前面的不生效。

1.如何实现
其原理就第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器,然后延迟一定时间再执行。

    var timer;
  function hiFrequency(){
      if(timer){
          clearTimeout(timer);
      }
        timer = setTimeout(function(){
             console.log('do something')
        }, 300);
  }

  hiFrequency()
  hiFrequency()
  hiFrequency()

当调用hiFrequency()的时候,会进行一个判断,刚开始的时候变量timerundefind的时候,就会执行定时器,在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()

和上面的是一样的

上一篇下一篇

猜你喜欢

热点阅读