节流和防抖

节流概念(Throttle)

按照设定的时间固定执行一次函数,设定一个时间,在这个时间内只执行一次,不到时间会返回,不会执行回调函数
主要场景:scroll、touchmove

防抖概念(Debounce)

抖动停止后的时间超过设定的时间时执行一次函数,设定一个时间,在你停止了触发这个函数,从这个时间开始计算,当间隔时间等于你设定时间,才会执行回调函数,如果你一直在触发这个函数并两次触发间隔小于设定时间,则一定不会执行回调函数
应用场景:input验证、搜索联想、resize

节流函数

// 节流函数
const throttle = (fn, delay = 500) => {
  let flag = true;
  return (...args) => {
    if (!flag) return;
    flag = false;
    setTimeout(() => {
      fn.apply(this, args);
      flag = true;
    }, delay);
  };
};

防抖函数

// 防抖函数
const debounce = (fn, delay) => {
  let timer = null;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
};

你可能感兴趣的:(节流和防抖)