防抖和节流封装模块

防抖:当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次。如果设定的时间到来之前,又一次触发了事件,就重新开始延迟

/**
 * 函数防抖模块
 * 使用场景 搜索联想,window触发resize的时候,防止重复提交
 * @param Function func 触发的事件
 * @param Number delay 延迟时间
 * @param Boolean  flag 防抖效果后防抖 false 先防抖 true
 *
 *  */
export function debounce(func, delay, flag) {
  let timer;
  return () => {
    clearTimeout(timer);
    if (flag) {
      let bl = !timer;
      timer = setTimeout(() => {
        timer = null;
      }, delay);
      if (bl) {
        func();
      }
    } else {
      timer = setTimeout(() => {
        func();
      }, delay);
    }
  };
}

  

节流:当持续触发事件时,保证一定时间段内只调用一次事件处理函数(例如:尿不尽)

/**
 * 函数节流模块
 * @param func 触发的事件
 * @param delay  延迟时间
 */
export function throttle(func, wait) {
  let previous = 0;
  return () => {
    let now = +new Date();
    if (now - previous > wait) {
      func();
      previous = now;
    }
  };
}
原文地址:https://www.cnblogs.com/caoruichun/p/11145927.html