vue中事件的防抖和节流

vue中点击事件的防抖和节流

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

/**
 * 函数防抖
 * @param fn 函数
 * @param delay 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
 */
export function _debounce(fn,delay,immediate){
  var delay = delay||200;
  var timer;
  return function(){
    var th = this;
    var args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    if(immediate){
      var callNow = !timer
      timer = setTimeout(()=>{
        timer = null;
      },delay)
      if (callNow) fn.apply(th, args)
    }else {
      timer = setTimeout(function(){
        timer = null;
        fn.apply(th,args);
      },delay)
    }
  }
}

节流（throttle）
节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率

//节流
// 函数节流
// param fn 函数
// param interval 延迟执行毫秒数
// param type 1 表时间戳版，2 表定时器版
//时间戳和定时器区别：时间戳版本的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候

export function _throttle(fn,interval,type) {
  if(type === 1){
    let previous = 0;
  }else if(type === 2){
    let timeout;
  }
  var interval = interval || 200;
  return function () {
    var th = this;
    var args = arguments;
    if(type === 1){
      let now = Date.now();
      if (now - previous > interval){
        fn.apply(th,args);
        previous = now;
      }
    }else if(type === 2){
      if(!timeout){
        timeout = setTimeout(()=> {
          timeout = null;
          fn.apply(th,args)
        }, interval);
      }
    }
  }
}

在组件中使用：

import { _debounce,_throttle} from "@/common/util/debounce.js";

methods:{
   needDebounce:_debounce(()=>{
   //需要防抖或者节流的函数
   },delay)
}

参考：https://www.jianshu.com/p/c8b86b09daf0