×

如何理解防抖与节流?请大神赐教

提问者:abc1232023.07.22浏览:857

防抖:将多次高频操作优化为只在最后一次执行,通常使用的场景是:用户输入,只需再输入完成后做一次输入校验即可。

实现逻辑:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。 实现代码:

// 定时器
const debounce = (fn, ms = 0) => {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn.apply(this, args), ms);
  };
};

节流:每隔一段时间后执行一次,也就是降低频率,将高频操作优化成低频操作,通常使用场景: 滚动条事件 或者 resize 事件,通常每隔 100~500 ms执行一次即可。

实现逻辑:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效 实现代码:

//定时器
const throttle = function (func, delay) {
  let timeoutId = null;
  return function (...args) {
    if (!timeoutId) {
      timeoutId = setTimeout(function () {
        func.apply(this, args);
        timeoutId = null
      }, delay);
    }
  }
}

// 时间戳
const throttle = function(func, delay) {
    let prev = Date.now();
    return function(...args) {
        let now = Date.now();
        if (now - prev >= delay) {
            func.apply(this, args);
            prev = Date.now();
        }
    }
}


您的支持是我们创作的动力!

网友回答文明上网理性发言 已有0人参与

发表评论: