防抖、节流、深拷贝和事件总线

认识防抖和节流函数

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

而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等是无法处理的；
并且如果存在对象的循环引用，也会报错的；

自定义深拷贝函数：

自定义深拷贝的基本功能；
对Symbol的key进行处理；
其他数据类型的值进程处理：数组、函数、Symbol、Set、Map；
对循环引用的处理；

基本实现

      // 需求: 判断一个标识符是否是对象
		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.

Hi,Friend

防抖、节流、深拷贝和事件总线

认识防抖和节流函数

认识防抖debounce函数

防抖函数的案例

认识节流throttle函数

节流函数的应用场景

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

案例准备

Underscore库的介绍

Underscore实现防抖和节流

自定义防抖和节流函数

自定义深拷贝函数

自定义事件总线

JavaScript网络编程

Storage、正则表达式

芝麻凛