vue中使用的防抖与节流函数

193 阅读1分钟
*  params fn 触发事件的具体逻辑函数,
*  params timer 定时器的时间单位为毫秒
*  如何使用:
*  1. import {debounceFn} from 'util/index' 引入防抖工具函数
*  2. methods写入 比如
*  methods: {
        testDebounce: debounceFn((vm) => { // 事件防抖,防止多次发送请求
        // vm就是vue实例对象
            vm.getData()
        }, 300),
        getData() { // 具体逻辑函数
          console.log(123);
        },
   }
*
* */
// 防抖函数
export function debounceFn(fn, timer){
    let timeout = null
    return function(){
        let args = arguments
        if(timeout) window.clearTimeout(timeout)
        timeout = setTimeout(() => {
            fn.apply(this, args)
        }, timer)
    }
}

/*
节流函数与防抖函数类似具体参考防抖函数
* */
// 节流函数
export function throttle(fn, timer){
    let timeout = null
    return function(){
        let args = arguments
        if(!timeout){
            timeout = setTimeout(() => {
                timeout = null
                fn.apply(this, args)
            }, timer)
        }
    }
} 
handleQuery: throttle(function(){ // 函数,防止多次发送请求
      this.loadList();
    }, 300),