vue与防抖节流函数

---

封装防抖节流函数

/** 
 * 节流函数
*/
export const throttle = (fn, interval)=> {
    // last为上一次触发回调的时间
    let last = 0
    
    // 将throttle处理结果当作函数返回
    return function () {
        // 保留调用时的this上下文
        let context = this
        // 保留调用时传入的参数
        let args = arguments
        // 记录本次触发回调的时间
        let now = +new Date()
        
        // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
        if (now - last >= interval) {
        // 如果时间间隔大于我们设定的时间间隔阈值，则执行回调
            last = now;
            fn.apply(context, args);
        }
    }
} 

/** 
 * 防抖函数
*/
export const debounce = (fn, delay) => {
    // 定时器
    let timer = null
    
    // 将debounce处理结果当作函数返回
    return function () {
      // 保留调用时的this上下文
      let context = this
      // 保留调用时传入的参数
      let args = arguments
  
      // 每次事件被触发时，都去清除之前的旧定时器
      if(timer) {
          clearTimeout(timer)
      }
      // 设立新定时器
      timer = setTimeout(function () {
        fn.apply(context, args)
      }, delay)
    }
  }

引用函数

import { debounce } from '@/utils/index'
export default {
	methods:{
	        getInput: debounce(function(event){
            const value = event.detail.value;
            if(value != ''){
                this.getCustomerList();
            }else{
                this.dim = false;
            }
        },1000),
	}
}