黑马程序员技术交流社区

标题: 防抖和节流 [打印本页]

---

作者: 天树123    时间: 2020-10-28 14:38
标题: 防抖和节流
前言：
节流和防抖是面试中，常问的问题，那接下来就来分析一下，防抖和节流。

一、节流
定义：在规定的时间内，无论触发多少次，都只执行一次
主要思路利用时间戳判断，每次调用判断和上一次调用的时间差异确定是否需要调用。 throttle实际是一个工厂函数，可以将一个函数封装为一个带有节流功能的函数。
module.exports.throttle = (fn, delay) => {
  // 定义上次触发时间
  let last = 0;
  return (...args) => {
    const now = + Date.now();
    console.log("call", now, last, delay);
    if (now > last + delay) {
      last = now;
      fn.apply(this, args);
    }
  };
};

二、防抖
定义：在规定的时间内，如果触发了，那时间将会重新计算
实现的话可以使用定时器执行函数，新调用发生时如果旧调用没有执行就清除之前的定时器。
/**
* 防抖Debounce
*/
module.exports.debounce = (fn, delay) => {
  let timer;
  return (...args) => {
    // 判断定时器是否存在，清除定时器
    if (timer) {
      clearTimeout(timer);
    }

    // 重新调用setTimeout
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
};

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2