异步回调与函数节流

异步回调

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

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()

和上面的是一样的

最后编辑于：2019.12.09 18:21:31