节流函数、防抖函数实现及应用

节流

什么是节流：在规定的时间内只执行一次，就是节流。

应用场景：快速点击按钮时短时间内重复发送请求问题

对于按钮点击事件，快速频次的点击，需求是在间隔相同时间内只会请求一次数据。

简易实现：

// 按钮点击事件  valid为全局变量 默认为true
buttonClick() {
    if(!this.valid) { // 首次点击不会return,   
       return;
    }
    // 首次点击之后全局变量置为false,同时向下执行，setTimeout推入待执行队列
    this.valid = false;
    this.timer = setTimeout(() => {
        console.log('按钮点击');
        this.valid = true; // 在定时器未执行前，valid为false,所以点击方法会直接return
    },1000)            
},

节流函数：

/**
 * 节流，当持续触发事件时，在规定时间段内只能调用一次回调函数
 */
export function Throttle(func, delay) {
  let inThrottle;
  return function() {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), delay);
    }
  };
}

防抖

防抖就是无论你将事件触发多少次，总是在最后一次触发事件多少时间之后执行。

换个方式说就是：在短时间内大量触发同一函数，只会执行一次函数(防止抖动)。

应用场景如：输入框input事件触发多次请求接口，页面滚动对应相应计算逻辑多次执行

简单实现：

// input事件
async userNameserch(val) {
    let self = this;
    let res;
    clearTimeout(this.timer);
    this.timer = setTimeout(async () => {
        res = await ImApi.searchAllByName({
            param: self.superviseUserNameserchValue,
        });
        if (res.code == 200 || res.state == "ok") {
            self.serchObj = res.data;
        }
   }, 500);
},

防抖函数：

/**
 * 防抖，指触发事件后在规定时间内回调函数只能执行一次，
 * 如果在规定时间内又触发了该事件，则会重新开始算规定时间
 */
export default function Debounce(fn,delay = 500) {
  let timer
  return function() {
    
    const th = this
    const args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(function() {
      timer = null
      fn.apply(th, args)
    }, delay)
  }
}