防抖和节流的使用

Mr.wang

发布于：2019年12月11日

js的防抖和节流函数的介绍和使用

函数防抖（debounce）

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

let timeout = null
export const debounce = (func, delay) => {
    //如果定时器不等于null就清除定时器
    if (timeout !== null) clearTimeout(timeout)
    //设置定时器延时执行函数
    timeout = setTimeout(func, delay)//如果在这个delay时间内执行了setTimeout，否者就会被下一个执行所清除，这样就是一个接一个进行执行，但是只执行最后一个
}

函数节流(Throttle)

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频。就相当于，一个水龙头在滴水，可能一次性会滴很多滴，但是我们只希望它每隔 500ms 滴一滴水，保持这个频率。即我们希望函数在以一个可以接受的频率重复调用。

时间戳方式

const throttle = (func, ms = 200) => {
  let prev = new Date().getTime()
  return function(...args) {
    let now = new Date().getTime()
    if (now - prev >= ms) {
      func()
      prev = now
    }
  }
}

const throttle(fn,wait)=>{
    var pre = Date.now();
    return function(){
        var context = this;
        var args = arguments;
        var now = Date.now();
        if( now - pre >= wait){
            fn.apply(context,args);
            pre = Date.now();
        }
    }
}

定时器方式

const throttle(fn,wait)=>{
    var timer = null;
    return function(){
        var context = this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                fn.apply(context,args);
                timer = null;
            },wait)
        }
    }
}