认识防抖和节流函数

防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电子元件中,节流出现在流体流动中

  • 而JavaScript是事件驱动的,大量的操作会触发事件,加入到事件队列中处理。
  • 而对于某些频繁的事件处理会造成性能的损耗,我们就可以通过防抖和节流来限制事件频繁的发生;

防抖和节流函数目前已经是前端实际开发中两个非常重要的函数,也是面试经常被问到的面试题。

但是很多前端开发者面对这两个功能,有点摸不着头脑:

  • 某些开发者根本无法区分防抖和节流有什么区别(面试经常会被问到);
  • 某些开发者可以区分,但是不知道如何应用;
  • 某些开发者会通过一些第三方库来使用,但是不知道内部原理,更不会编写;

接下来我们会一起来学习防抖和节流函数:

  • 我们不仅仅要区分清楚防抖和节流两者的区别,也要明白在实际工作中哪些场景会用到;
  • 并且我会带着大家一点点来编写一个自己的防抖和节流的函数,不仅理解原理,也学会自己来编写;

认识防抖debounce函数

我们用一副图来理解一下它的过程:

  • 当事件触发时,相应的函数并不会立即触发,而是会等待一定的时间;
  • 当事件密集触发时,函数的触发会被频繁的推迟;
  • 只有等待了一段时间也没有事件触发,才会真正的执行响应函数;

防抖的应用场景很多:

  • 输入框中频繁的输入内容,搜索或者提交信息;
  • 频繁的点击按钮,触发某个事件;
  • 监听浏览器滚动事件,完成某些特定操作;
  • 用户缩放浏览器的resize事件;

防抖函数的案例

我们都遇到过这样的场景,在某个搜索框中输入自己想要搜索的内容:

比如想要搜索一个MacBook:

  • 当我输入m时,为了更好的用户体验,通常会出现对应的联想内容,这些联想内容通常是保存在服务器的,所以需要一次网络请求;
  • 当继续输入ma时,再次发送网络请求;
  • 那么macbook一共需要发送7次网络请求;
  • 这大大损耗我们整个系统的性能,无论是前端的事件处理,还是对于服务器的压力;

但是我们需要这么多次的网络请求吗?

  • 不需要,正确的做法应该是在合适的情况下再发送网络请求;
  • 比如如果用户快速的输入一个macbook,那么只是发送一次网络请求;
  • 比如如果用户是输入一个m想了一会儿,这个时候m确实应该发送一次网络请求;
  • 也就是我们应该监听用户在某个时间,比如500ms内,没有再次触发时间时,再发送网络请求;

这就是防抖的操作:只有在某个时间内,没有再次触发某个函数时,才真正的调用这个函数;

基本实现

	function rDebounce(fn, delay) {
        // 1.用于记录上一次事件触发的timer
        let timer = null;
        // 2.触发事件时执行的函数
        const _debounce = () => {
          // 2.1 如果再次触发(更多次触发),需要取消上一次事件
          if (timer) clearTimeout(timer);
          // 2.2 延迟去执行对应的fn函数(传入的回调函数)
          timer = setTimeout(() => {
            fn();
            timer = null; // 执行过函数后,将timer 重新置为null
          }, delay);
        };
        return _debounce;
      }

优化

	  // 原则: 一个函数只做一件事情,一个变量也用于记录一种状态
      function rDebounce(fn, delay = 200, immediate = false, resultCallback) {
        // 1.用于记录上一次事件触发的timer
        let timer = null;
        let isInvoke = false;
        // 2.触发事件时执行的函数
        const _debounce = function (...args) {
          return new Promise((resolve, reject) => {
            try {
              // 2.1 如果再次触发(更多次触发),需要取消上一次事件
              if (timer) clearTimeout(timer);
              // 第一次操作不需要延迟
              let res = undefined;
              if (immediate && !isInvoke) {
                res = fn.apply(this, args);
                if (resultCallback) resultCallback(res);
                resolve(res);
                isInvoke = true;
                return;
              }
              // 2.2 延迟去执行对应的fn函数(传入的回调函数)
              timer = setTimeout(() => {
                res = fn.apply(this, args);
                if (resultCallback) resultCallback(res);
                resolve(res);
                timer = null; // 执行过函数后,将timer 重新置为null
                isInvoke = false;
              }, delay);
            } catch (error) {
              reject(error);
            }
          });
        };
        // 3.给_debounce绑定一个取消的函数
        _debounce.cancel = function () {
          if (timer) clearTimeout(timer);
          timer = null;
          isInvoke = false;
        };
        return _debounce;
      }

认识节流throttle函数

我们用一副图来理解一下节流的过程

  • 当事件触发时,会执行这个事件的响应函数;
  • 如果这个事件会被频繁触发,那么节流函数会按照一定的频率来执行函数;
  • 不管在这个中间有多少次触发这个事件,执行函数的频繁总是固定的;

节流的应用场景:

  • 监听页面的滚动事件;
  • 鼠标移动事件;
  • 用户频繁点击按钮操作;
  • 游戏中的一些设计;

节流函数的应用场景

很多人都玩过类似于飞机大战的游戏

在飞机大战的游戏中,我们按下空格会发射一个子弹:

  • 很多飞机大战的游戏中会有这样的设定,即使按下的频率非常快,子弹也会保持一定的频率来发射;
  • 比如1秒钟只能发射一次,即使用户在这1秒钟按下了10次,子弹会保持发射一颗的频率来发射;
  • 但是事件是触发了10次的,响应的函数只触发了一次;

基本实现

      function rThrottle(fn, interval) {
        let startTime = 0;
        const _throttle = function () {
          const nowTime = new Date().getTime();
          const waitTime = interval - (nowTime - startTime);
          if (waitTime <= 0) {
            fn();
            startTime = nowTime;
          }
        };
        return _throttle;
      }

优化

      function rThrottle(
        fn,
        interval,
        { leading = true, trailing = false } = {}
      ) {
      
        let startTime = 0;
        let timer = null;
        const _throttle = function (...args) {
          return new Promise((resolve, reject) => {
            try {
              // 1.获取当前时间
              const nowTime = new Date().getTime();
              // 对立即执行进行控制
              if (!leading && startTime === 0) {
                startTime = nowTime;
              }

              // 2.计算需要等待的时间执行函数
              const waitTime = interval - (nowTime - startTime);
              if (waitTime <= 0) {
                if (timer) clearTimeout(timer);
                const res = fn.apply(this, args);
                resolve(res);
                startTime = nowTime;
                timer = null;
                return;
              }

              // 3.判断是否需要执行尾部
              if (trailing && !timer) {
                timer = setTimeout(() => {
                  const res = fn.apply(this, args);
                  resolve(res);
                  startTime = new Date().getTime();
                  timer = null;
                }, waitTime);
              }
            } catch (error) {
              reject(error);
            }
          });
        };

        _throttle.cancel = function () {
          if (timer) clearTimeout(timer);
          startTime = 0;
          timer = null;
        };
        return _throttle;
      }

生活中的例子:防抖和节流

生活中防抖的例子:
比如说有一天我上完课,我说大家有什么问题来问我,我会等待五分钟的时间。
如果在五分钟的时间内,没有同学问我问题,那么我就下课了;

  • 在此期间,a同学过来问问题,并且帮他解答,解答完后,我会再次等待五分钟的时间看有没有其他同学问问题;
  • 如果我等待超过了5分钟,就点击了下课(才真正执行这个时间);

生活中节流的例子:

  • 比如说有一天我上完课,我说大家有什么问题来问我,但是在一个5分钟之内,不管有多少同学来问问题,我只会解答一个问题;
  • 如果在解答完一个问题后,5分钟之后还没有同学问问题,那么就下课;

案例准备

我们通过一个搜索框来延迟防抖函数的实现过程:

  • 监听input的输入,通过打印模拟网络请求

测试发现快速输入一个macbook共发送了7次请求,显示我们需要对它进行防抖操作:

Underscore库的介绍

事实上我们可以通过一些第三方库来实现防抖操作:

  • lodash
  • underscore

这里使用underscore

  • 我们可以理解成lodash是underscore的升级版,它更重量级,功能也更多;
  • 但是目前我看到underscore还在维护,lodash已经很久没有更新了;

Underscore的官网: https://underscorejs.org/

Underscore的安装有很多种方式:

  • 下载Underscore,本地引入;
  • 通过CDN直接引入;
  • 通过包管理工具(npm)管理安装;

这里我们直接通过CDN:

<script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>

Underscore实现防抖和节流

自定义防抖和节流函数

我们按照如下思路来实现:

  • 防抖基本功能实现:可以实现防抖效果
  • 优化一:优化参数和this指向
  • 优化二:优化取消操作(增加取消功能)
  • 优化三:优化立即执行效果(第一次立即执行)
  • 优化四:优化返回值

我们按照如下思路来实现:

  • 节流函数的基本实现:可以实现节流效果
  • 优化一:节流最后一次也可以执行
  • 优化二:优化添加取消功能
  • 优化三:优化返回值问题

自定义深拷贝函数

我们已经学习了对象相互赋值的一些关系,分别包括:

  • 引入的赋值:指向同一个对象,相互之间会影响;
  • 对象的浅拷贝:只是浅层的拷贝,内部引入对象时,依然会相互影响;
  • 对象的深拷贝:两个对象不再有任何关系,不会相互影响;
      const info = {
        name: "what",
        age: 18,
        friend: {
          name: "rick",
        },
        running: function () {},
        [Symbol()]: "abc",
      };
      info.obj = info;

      // 1.操作一: 引用赋值
      const obj1 = info;
      
      // 2.操作而: 浅拷贝
      const obj2 = { ...info };
      /* obj2.name = "rin";
      obj2.friend.name = "kin";
      console.log(info.name, info.friend.name); */

      /* const obj3 = Object.assign({}, info);
      obj3.name = "rin";
      obj3.friend.name = "kin";
      console.log(info.name, info.friend.name); */

      // 3.操作三: 深拷贝
      // 3.1 JSON方法
      const obj4 = JSON.parse(JSON.stringify(info));
      obj4.name = "rin2";
      obj4.friend.name = "kin2";
      console.log(obj4);
      console.log(info.name, info.friend.name);
      // 3.2 自己编写一个深拷贝(第三方库)

前面我们已经可以通过一种方法来实现深拷贝了:JSON.parse

  • 这种深拷贝的方式其实对于函数、Symbol等是无法处理的;
  • 并且如果存在对象的循环引用,也会报错的;

自定义深拷贝函数:

  1. 自定义深拷贝的基本功能;
  2. 对Symbol的key进行处理;
  3. 其他数据类型的值进程处理:数组、函数、Symbol、Set、Map;
  4. 对循环引用的处理;

基本实现

      // 需求: 判断一个标识符是否是对象
		function isObject(value) {		
		  // null,object,function,array		
		  // null => object
		  // function => function --> true
		  // object/array => object --> true
		  const valueType = typeof value;
		  return (
			value !== null && (valueType === "object" || valueType === "function")
		  );
		}
      // 深拷贝函数
      function deepCopy(originValue) {
        // 1.如果是原始类型,直接返回
        if (!isObject(originValue)) {
          return originValue;
        }

        // 2.如果是对象类型,才需要创建对象
        const newObj = {};
        for (const key in originValue) {
          newObj[key] = deepCopy(originValue[key]);
        }
        return newObj;
      }

      const info = {
        name: "rick",
        age: 18,
        friend: {
          name: "rin",
          address: {
            name: "东京",
            detail: "四谷区",
          },
        },
      };

      const newObj = deepCopy(info);
      info.friend.address.name = "北海道";
      console.log(newObj.friend.address.name);

优化代码: 针对数组

      // 深拷贝函数
      function deepCopy(originValue) {
        // 1.如果是原始类型,直接返回
        if (!isObject(originValue)) {
          return originValue;
        }

        // 2.如果是对象类型,才需要创建对象(判断是否是数组)
        const newObj = Array.isArray(originValue) ? [] : {};
        for (const key in originValue) {
          newObj[key] = deepCopy(originValue[key]);
        }
        return newObj;
      }
      const books = [
        { name: "了不起的盖茨比", price: 39,desc:{intro:'这本书不错',info:'这本书描述了一个很不错的故事'} },
        { name: "你不知道的JavaScript", price: 99 },
      ];
      const newBooks = deepCopy(books);
      console.log(newBooks);

优化代码: 针对其他类型和循环引用

      // 深拷贝函数
      // let map = new WeakMap();
      function deepCopy(originValue, map = new WeakMap()) {
        // let map = new WeakMap();
        // 0.如果值是Symbol类型
        if (typeof originValue === "symbol") {
          return Symbol(originValue.description);
        }

        // 1.如果是原始类型,直接返回
        if (!isObject(originValue)) {
          return originValue;
        }

        // 2.如果是set类型
        if (originValue instanceof Set) {
          const newSet = new Set();
          for (const setItem of originValue) {
            newSet.add(deepCopy(setItem));
          }
          return newSet;
        }

        // 3.如果是函数function类型,不需要进行深拷贝
        if (typeof originValue === "function") {
          return originValue;
        }

        // 2.如果是对象类型,才需要创建对象(判断是否是数组)
        if (map.get(originValue)) {
          return map.get(originValue);
        }

        const newObj = Array.isArray(originValue) ? [] : {};
        map.set(originValue, newObj);
        
        // 遍历普通的key
        for (const key in originValue) {
          newObj[key] = deepCopy(originValue[key], map);
        }

        // 单独遍历symbol
        const symbolKeys = Object.getOwnPropertySymbols(originValue);
        for (const symbolKey of symbolKeys) {
          newObj[Symbol(symbolKey.description)] = deepCopy(
            originValue[symbolKey],
            map
          );
        }
        return newObj;
      }

      const s1 = Symbol();
      const set = new Set(["abc", "cba", "nba"]);

      const info = {
        name: "rick",
        age: 18,
        friend: {
          name: "rin",
          address: {
            name: "东京",
            detail: "四谷区",
          },
        },
        // 1.特殊类型 Set
        set,
        // 2.特殊类型 function
        running: function () {
          console.log("running~");
        },
        // 3.值的特殊类型: Symbol
        symbol: Symbol("cba"),
        // key 是Symbol
        [s1]: "aaa",
      };

      info.self = info;
      const newInfo = deepCopy(info);
      console.log(newInfo);

自定义事件总线

自定义事件总线属于一种观察者模式,其中包括三个角色:

  • 发布者(Publisher):发出事件(Event);
  • 订阅者(Subscriber):订阅事件(Event),并且会进行响应(Handler);
  • 事件总线(EventBus):无论是发布者还是订阅者都是通过事件总线作为中台的;

当然我们可以选择一些第三方的库:

  • Vue2默认是带有事件总线的功能;
  • Vue3中推荐一些第三方库,比如mitt;

当然我们也可以实现自己的事件总线:

  • 事件的监听方法on;
  • 事件的发射方法emit;
  • 事件的取消监听off;
    <button class="nav-btn">nav button</button>
    <script>
      // 类 EventBus => 事件总线对象
      class rEventBus {
        constructor() {
          this.eventMap = {};
        }

        on(eventName, eventFn) {
          let eventFns = this.eventMap[eventName];
          if (!eventFns) {
            eventFns = [];
            this.eventMap[eventName] = eventFns;
          }
          eventFns.push(eventFn);
        }

        off(eventName, eventFn) {
          let eventFns = this.eventMap[eventName];
          if (!eventFns) return;
          for (let i = 0; i < eventFns.length; i++) {
            const fn = eventFns[i];
            if (fn === eventFn) {
              eventFns.splice(i, 1);
              break;
            }
          }

          // 如果eventFns已经清空了
          if (eventFns.length === 0) {
            delete this.eventMap[eventName];
          }
        }

        emit(eventName, ...args) {
          let eventFns = this.eventMap[eventName];
          if (!eventFns) return;
          eventFns.forEach((fn) => {
            fn(...args);
          });
        }
      }

      // 使用过程
      const eventBus = new rEventBus();
      
      // aside.vue 组建中监听事件
      eventBus.on("navClick", (name, age, height) => {
        console.log("navClick listener 01", name, age, height);
      });

      const click = () => {
        console.log("navClick listener 02");
      };

      eventBus.on("navClick", click);
      setTimeout(() => {
        eventBus.off("navClick", click);
      }, 5000);

      eventBus.on("asideClick", (name, age, height) => {
        console.log("asideClick listener 01");
      });

      // nav.vue
      const navBtnEl = document.querySelector(".nav-btn");
      navBtnEl.onclick = function () {
        console.log("自己监听到");
        eventBus.emit("navClick", "what", 29, 1.63);
      };

Q.E.D.