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

1 认识防抖和节流

2 underscore使用

3 防抖函数实现优化

4 节流函数实现优化

5 深拷贝函数的实现

6 事件总线工具实现

简而言之，防抖就是一直触发事件就一直往后拖延再执行。

节流就是一段时间就执行一次，不管中间你触发多少次。

防抖-认识防抖操作 

  按钮

  
  
  
  
  
  
  

防抖-实现防抖-基本实现(面试

需要拿到之前的执行的函数才能取消之前执行的函数，这里是通过let timer来获取的。

主要是通过定时器来做到延时执行，而定时器里面有timer置null的作用清除。

  按钮

  
  
  
  
  
  

  

  

防抖-实现防抖-this和参数绑定

绑定this的过程

还有就是dom事件有绑定event事件，我们写hudebounce最终其实是在执行_debounce，那么这个函数其实已经隐式绑定了inputEl,拿到了this就是inputEl。而const _debounce = function(...args)可以拿到event和其他参数传递给fn函数。

  按钮

  
  
  
  
  
  

  

  

防抖-实现防抖-取消功能实现

oninput的事件，输入了就一定会执行了，我们可以设置一个按钮来取消这个事件的执行，具体怎么实现看代码。主要是hudebounce的_debounce是对象类型，所以可以直接.函数来取消执行。

  按钮

  
  取消
  
  
  
  
  

  

  

防抖-实现防抖-立即执行功能

应用场景可能是  用户输入book 的时候，第一次输入b的时候马上执行，后续的ook才有防抖效果。通过另外一个变量来控制 let isInvoke。

  按钮

  
  取消
  
  
  
  
  

  

  

防抖-实现防抖-获取返回值

利用promise来做到获取返回值。

  按钮

  
  取消
  
  
  
  
  

  

  

防抖-实现防抖-封装独立文件

封装的代码：

// 原则: 一个函数进行做一件事情, 一个变量也用于记录一种状态
function hydebounce(fn, delay, 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
}

执行的代码html

  
  
  
  


  
  
  取消

  
  

节流-认识节流操作

使用第三方库

  按钮

  
  
  
  
  
  
  

节流-实现节流-基本实现(面试)

需要通过一个计算公式来实现节流的效果

const waitTime = interval - (nowTime - startTime)

waitTime用来判断是否执行fn函数

interval是使用者规定的执行间隔时间

nowTime是记录每次执行hythrottle的时间点

startTime是记录每次执行fn的时间点，通过if判断来决定是否执行fn函数。

  按钮

  
  
  
  
  
  

  

  

节流-实现节流-this和参数绑定

实现的原理和之前的防抖一样，都是利用了隐式绑定的方法。fn.apply(this, args)

  按钮

  
  
  
  
  
  

  

  

节流-实现节流-立即执行控制

立即执行和最后一次执行是否执行。

  按钮

  
  
  
  
  
  

  

  

节流-实现节流-尾部执行控制(了解)

不同于防抖，防抖的最后一次是一定执行的，但是节流的最后一次如果没有达到限制的时间是不会执行的，以下是解决办法。

  按钮

  
  
  
  
  
  

  

  

节流-实现节流-取消功能实现

1

  按钮

  
  取消
  
  
  
  
  

  

  

节流-实现节流-获取返回值

1

  按钮

  
  取消
  
  
  
  
  

  

  

节流-实现节流-封装独立文件

underscore.js

function hythrottle(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) {
          // console.log("执行操作fn")
          if (timer) clearTimeout(timer)
          const res = fn.apply(this, args)
          resolve(res)
          startTime = nowTime
          timer = null
          return
        } 

        // 3.判断是否需要执行尾部
        if (trailing && !timer) {
          timer = setTimeout(() => {
            // console.log("执行timer")
            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
}

  按钮

  
  取消
  
  
  
  
  
  

  

深拷贝-和浅拷贝-引入赋值关系

浅拷贝是把一个对象类型的值复制到另外一个对象里面，这两个对象值一样，但是各自修改值的时候不会出现引用赋值那样影响到另外一个对象值，也就是他们两个对象的内存地址不同，是两个不同的对象类型。

深拷贝是在浅拷贝的基础上能在对象里面的对象实现浅拷贝的情况。

深拷贝的第一种方法是利用JSON方法先转成字符串，在转为对象，就能把对象里面的对象转换成深拷贝对象。但是这种有个缺点就是，如果对象里面有函数或者[Symbol()]: "abc"，这种会被忽略掉，没办法获取；循环 的对象也不能用（window.window.window.window）。

  console.log(window.window === window)

    const info = {
      name: "why",
      age: 18,
      friend: {
        name: "kobe"
      },
      running: function() {},
      [Symbol()]: "abc",
      // obj: info
    }
    info.obj = info

    // 1.操作一: 引用赋值
    // const obj1 = info

    // 2.操作二: 浅拷贝
    // const obj2 = { ...info }
    // // obj2.name = "james"
    // // obj2.friend.name = "james"
    // // console.log(info.friend.name)

    // const obj3 = Object.assign({}, info)
    // // obj3.name = "curry"
    // obj3.friend.name = "curry"
    // console.log(info.friend.name)

    // 3.操作三: 深拷贝
    // 3.1.JSON方法
    // const obj4 = JSON.parse(JSON.stringify(info))
    // info.friend.name = "curry"
    // console.log(obj4.friend.name)
    // console.log(obj4)

    // 3.2.自己编写一个深拷贝函数(第三方库)

深拷贝-深拷贝函数的基本使用

判断是否是对象类型（这里没算函数和数组类型）的工具is_object.js

// 需求: 判断一个标识符是否是对象类型
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" )
}

// const name = "why"
// const age = 18
// const foo = {}
// const bar = function() {}
// const arr = []

// console.log(isObject(null)) // false
// console.log(isObject(bar)) // true
// console.log(isObject(name)) // false
// console.log(isObject(foo)) // true
// console.log(isObject(arr)) // true

深拷贝对类型的核函数

这里拷贝的是对象里面有对象的情况

深拷贝-深拷贝函数的数组拷贝

这里拷贝的是数组里面存在对象类型时的情况。

深拷贝-深拷贝函数的其他类型

特殊类型的set、function、symbol类型的情况

深拷贝-深拷贝函数的循环引用

如果对象类型里面的变量有对自己的引用，那就回出错，无线循环报错。

事件总线-事件总线实现

跨文件、组件组件的通信使用。

  nav button