高阶技巧

辉哥大约 20 分钟

JavaScript高阶技巧

以下为学习过程中的极简提炼笔记，以供重温巩固学习

准备工作

已完成JavaScript前面12节学习

学习目的

深入this学习，知道如何判断this指向和改变this指向
知道在JS中如何处理异常，学习深浅拷贝，理解递归

深浅拷贝

直接复制对象的问题

<script>
  const obj = {
      uname: 'pink',
      age: 18
    }
  const o = obj
  console.log(o)
  o.age = 20
  console.log(o)
  console.log(obj)
</script>

浅拷贝

首先浅拷贝和深拷贝只针对引用类型

浅拷贝：拷贝的是地址

常见方法：

拷贝对象：Object.assgin() / 展开运算符 {...obj} 拷贝对象
拷贝数组：Array.prototype.concat() 或者 [...arr]

如果是简单数据类型拷贝值，引用数据类型拷贝的是地址 (简单理解：如果是单层对象，没问题，如果有多层就有问题)

<script>
  const obj = {
    uname: 'pink',
    age: 18,
    family: {
      baby: '小pink'
    }
  }
  // 浅拷贝
  // const o = { ...obj }
  // console.log(o)
  // o.age = 20
  // console.log(o)
  // console.log(obj)
  const o = {}
  Object.assign(o, obj)
  o.age = 20
  o.family.baby = '老pink'
  console.log(o)
  console.log(obj)
</script>

直接赋值和浅拷贝有什么区别？

直接赋值的方法，只要是对象，都会相互影响，因为是直接拷贝对象栈里面的地址
浅拷贝如果是一层对象，不相互影响，如果出现多层对象拷贝还会相互影响

浅拷贝怎么理解？

拷贝对象之后，里面的属性值是简单数据类型直接拷贝值
如果属性值是引用数据类型则拷贝的是地址

深拷贝

首先浅拷贝和深拷贝只针对引用类型

深拷贝：拷贝的是对象，不是地址

常见方法：

通过递归实现深拷贝
lodash/cloneDeep
通过JSON.stringify()实现

通过递归实现深拷贝

函数递归：

如果一个函数在内部可以调用其本身，那么这个函数就是递归函数

简单理解:函数内部自己调用自己, 这个函数就是递归函数
递归函数的作用和循环效果类似
由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件 return

递归函数

<script>
    let num = 1
    // 下面的fn就是递归函数
    function fn() {
      console.log(`我要打印6次，这是第${i}次`)
      if (num >= 6) {
        return
      }
      num++
      fn()  //函数内部调用函数自己
    }
    fn()
  </script>

利用递归函数实现 setTimeout 模拟 setInterval效果

需求： ①：页面每隔一秒输出当前的时间 ②：输出当前时间可以使用：new Date().toLocaleString()

语法格式案例

String 模拟setInterval效果


<body>
  <div></div>
  <script>
    function getTime() {
      document.querySelector('div').innerHTML = new Date().toLocaleString()
      setTimeout(getTime, 1000)
    }
    getTime()
  </script>
</body>

常见方法：通过递归函数实现深拷贝（简版）

<body>
  <script>
    const o = {}
    // 拷贝函数
    function deepCopy(newObj, oldObj) {
      for (let k in oldObj) {
        newObj[k] = oldObj[k]
      }
    }
  deepCopy(o, obj)
  </script>
</body>

通过递归函数实现深拷贝完整

<body>
  <script>
    const obj = {
      uname: 'pink',
      age: 18,
      hobby: ['乒乓球', '足球'],
      family: {
        baby: '小pink'
      }
    }
    const o = {}
    // 拷贝函数
    function deepCopy(newObj, oldObj) {
      debugger
      for (let k in oldObj) {
        // 处理数组的问题  一定先写数组 在写 对象 不能颠倒
        if (oldObj[k] instanceof Array) {
          newObj[k] = []
          //  newObj[k] 接收 []  hobby
          //  oldObj[k]   ['乒乓球', '足球']
          deepCopy(newObj[k], oldObj[k])
        } else if (oldObj[k] instanceof Object) {
          newObj[k] = {}
          deepCopy(newObj[k], oldObj[k])
        }
        else {
          //  k  属性名 uname age    oldObj[k]  属性值  18
          // newObj[k]  === o.uname  给新对象添加属性
          newObj[k] = oldObj[k]
        }
      }
    }
    deepCopy(o, obj) // 函数调用  两个参数 o 新对象  obj 旧对象
    console.log(o)
    o.age = 20
    o.hobby[0] = '篮球'
    o.family.baby = '老pink'
    console.log(obj)
    console.log([1, 23] instanceof Object)
    // 复习
    // const obj = {
    //   uname: 'pink',
    //   age: 18,
    //   hobby: ['乒乓球', '足球']
    // }
    // function deepCopy({ }, oldObj) {
    //   // k 属性名  oldObj[k] 属性值
    //   for (let k in oldObj) {
    //     // 处理数组的问题   k 变量
    //     newObj[k] = oldObj[k]
    //     // o.uname = 'pink'
    //     // newObj.k  = 'pink'
    //   }
    // }
  </script>
</body>

js库lodash里面cloneDeep内部实现了深拷贝

利用js库 lodash里面的 _.cloneDeep() 实现深拷贝

<body>
  <!-- 先引用 -->
  <script src="./lodash.min.js"></script>
  <script>
    const obj = {
      uname: 'pink',
      age: 18,
      hobby: ['乒乓球', '足球'],
      family: {
        baby: '小pink'
      }
    }
    const o = _.cloneDeep(obj)
    console.log(o)
    o.family.baby = '老pink'
    console.log(obj)
  </script>
</body>

JSON序列化

通过 JSON.stringify() 字符串转换实现深拷贝

<body>
  <script>
    const obj = {
      uname: 'pink',
      age: 18,
      hobby: ['乒乓球', '足球'],
      family: {
        baby: '小pink'
      }
    }
    // 把对象转换为 JSON 字符串
    // console.log(JSON.stringify(obj))
    const o = JSON.parse(JSON.stringify(obj))
    console.log(o)
    o.family.baby = '123'
    console.log(obj)
  </script>
</body>

异常处理

了解 JavaScript 中程序异常处理的方法，提升代码运行的健壮性

throw 抛异常

异常处理是指预估代码执行过程中可能发生的错误，然后最大程度的避免错误的发生导致整个程序无法继续运行

<script>
  function counter(x, y) {

    if(!x || !y) {
      // throw '参数不能为空!';
      throw new Error('参数不能为空!')
    }

    return x + y
  }

  counter()
</script>

总结：

throw 抛出异常信息，程序也会终止执行
throw 后面跟的是错误提示信息
Error 对象配合 throw 使用，能够设置更详细的错误信息

语法格式案例

throw抛出异常


<body>
  <script>
    function fn(x, y) {
      if (!x || !y) {
        // throw '没有参数传递进来'
        throw new Error('没有参数传递过来')
      }

      return x + y
    }
    console.log(fn())
  </script>
</body>

try ... catch 捕获错误信息

我们可以通过try / catch 捕获错误信息（浏览器提供的错误信息） try 试试 catch 拦住 finally 最后

<script>
  function foo() {
    try {
      // 查找 DOM 节点
      const p = document.querySelector('.p')
      p.style.color = 'red'
    } catch (error) {
      // try 代码段中执行有错误时，会执行 catch 代码段
      // 查看错误信息
      console.log(error.message)
      // 终止代码继续执行
      return

    }
    finally {
        alert('执行')
    }
    console.log('如果出现错误，我的语句不会执行')
  }
  foo()
</script>

总结：

try...catch 用于捕获错误信息
将预估可能发生错误的代码写在 try 代码段中
如果 try 代码段中出现错误后，会执行 catch 代码段，并截获到错误信息
finally 不管是否有错误，都会执行
捕获异常我们用 try catch finally 3个关键字
利用catch的参数调用错误信息

语法格式案例

try-catch捕获异常


<body>
  <script>
    function fn() {
      try {
        // 可能发送错误的代码 要写到 try
        const p = document.querySelector('.p')
        p.style.color = 'red'
      } catch (err) {
        // 拦截错误，提示浏览器提供的错误信息，但是不中断程序的执行
        console.log(err.message)
        throw new Error('你看看，选择器错误了吧')
        // 需要加return 中断程序
        // return
      }
      finally {
        // 不管你程序对不对，一定会执行的代码
        alert('弹出对话框')
      }
      console.log(11)
    }
    fn()
  </script>
</body>

debugger

相当于断点调试

处理this

了解函数中 this 在不同场景下的默认值，知道动态指定函数 this 值的方法。

this 是 JavaScript 最具“魅惑”的知识点，不同的应用场合 this 的取值可能会有意想不到的结果在此我们对以往学习过的关于【 this 默认的取值】情况进行归纳和总结

普通函数

普通函数的调用方式决定了 this 的值，即【谁调用 this 的值指向谁】，如下代码所示：

<script>
  // 普通函数
  function sayHi() {
    console.log(this)  
  }
  // 函数表达式
  const sayHello = function () {
    console.log(this)
  }
  // 函数的调用方式决定了 this 的值
  sayHi() // window
  window.sayHi()
	

  // 普通对象
  const user = {
    name: '小明',
    walk: function () {
      console.log(this)
    }
  }
  // 动态为 user 添加方法
  user.sayHi = sayHi
  uesr.sayHello = sayHello
  // 函数调用方式，决定了 this 的值
  user.sayHi()
  user.sayHello()
</script>

普通函数的this指向


<body>
  <script>
    // 普通函数：  谁调用我，this就指向谁
    console.log(this)  // window
    function fn() {
      console.log(this)  // window    
    }
    window.fn()
    window.setTimeout(function () {
      console.log(this) // window 
    }, 1000)
    document.querySelector('button').addEventListener('click', function () {
      console.log(this)  // 指向 button
    })
    const obj = {
      sayHi: function () {
        console.log(this)  // 指向 obj
      }
    }
    obj.sayHi()
  </script>
</body>

注：普通函数没有明确调用者时 this 值为 window，严格模式下没有调用者时 this 的值为 undefined

箭头函数

箭头函数中的 this 与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在 this ！箭头函数中访问的 this 不过是箭头函数所在作用域的 this 变量

箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的
箭头函数中的this引用的就是最近作用域中的this
向外层作用域中，一层一层查找this，直到有this的定义

<script>
    
  console.log(this) // 此处为 window
  // 箭头函数
  const sayHi = function() {
    console.log(this) // 该箭头函数中的 this 为函数声明环境中 this 一致
  }
  // 普通对象
  const user = {
    name: '小明',
    // 该箭头函数中的 this 为函数声明环境中 this 一致
    walk: () => {
      console.log(this)
    },
    
    sleep: function () {
      let str = 'hello'
      console.log(this)
      let fn = () => {
        console.log(str)
        console.log(this) // 该箭头函数中的 this 与 sleep 中的 this 一致
      }
      // 调用箭头函数
      fn();
    }
  }

  // 动态添加方法
  user.sayHi = sayHi
  
  // 函数调用
  user.sayHi()
  user.sleep()
  user.walk()
</script>

注意情况1

在开发中【使用箭头函数前需要考虑函数中 this 的值】，事件回调函数使用箭头函数时，this 为全局的 window

因此DOM事件回调函数如果里面需要DOM对象的this，则不推荐使用箭头函数

<script>
  // DOM 节点
  const btn = document.querySelector('.btn')
  // 箭头函数 此时 this 指向了 window
  btn.addEventListener('click', () => {
    console.log(this)
  })
  // 普通函数 此时 this 指向了 DOM 对象
  btn.addEventListener('click', function () {
    console.log(this)
  })
</script>

注意情况2

同样由于箭头函数 this 的原因，基于原型的面向对象也不推荐采用箭头函数

如下代码所示：

<script>
  function Person() {
  }
  // 原型对像上添加了箭头函数
  Person.prototype.walk = () => {
    console.log('人都要走路...')
    console.log(this); // window
  }
  const p1 = new Person()
  p1.walk()
</script>

箭头函数总结

函数内不存在this，沿用上一级的，过程：向外层作用域中，一层一层查找this，直到有this的定义
不适用地方：构造函数，原型函数，字面量对象中函数，dom事件函数
适用地方：需要使用上层this的地方

改变this指向

以上归纳了普通函数和箭头函数中关于 this 默认值的情形，不仅如此 JavaScript 中还允许指定函数中 this 的指向

有 3 个方法可以动态指定普通函数中 this 的指向：

call()
apply()
bind()

call

使用 call 方法调用函数，同时指定函数中 this 的值

使用语法：

fun.call(thisArg, arg1, arg2, ...)

thisArg：在 fun 函数运行时指定的 this 值
arg1，arg2：传递的其他参数
返回值就是函数的返回值，因为它就是调用函数

<script>
  // 普通函数
  function sayHi() {
    console.log(this);
  }

  let user = {
    name: '小明',
    age: 18
  }

  let student = {
    name: '小红',
    age: 16
  }

  // 调用函数并指定 this 的值
  sayHi.call(user); // this 值为 user
  sayHi.call(student); // this 值为 student

  // 求和函数
  function counter(x, y) {
    return x + y;
  }

  // 调用 counter 函数，并传入参数
  let result = counter.call(null, 5, 10);
  console.log(result);
</script>

总结：

call 方法能够在调用函数的同时指定 this 的值
使用 call 方法调用函数时，第1个参数为 this 指定的值
call 方法的其余参数会依次自动传入函数做为函数的参数

<script>
  // 案例1
  const obj1 = {
    uname: 'pink'
  }
  function fn() {
    console.log(this) // 指向 obj1 {name:'pink'}
  }
  fn.call(obj)

  // 案例2
  const obj2 = {
    uname: 'pink'
  }
  function fn(x, y) {
    console.log(this)    // 指向window obj2 {name:'pink'}
    console.log(x + y)   // 传递过来的参数相加
  } 
  // 1. 调用函数  
  // 2. 改变 this 指向
  fn.call(obj2, 1, 2)
</script>

call的作用是？

调用函数，并可以改变被调用函数里面的this指向

call 里面第一个参数是指定this，其余是实参，传递的参数

apply

使用 call 方法调用函数，同时指定函数中 this 的值

使用语法：

fun.apply(thisArg, [argsArray])

thisArg：在fun函数运行时指定的 this 值
argsArray：传递的值，必须包含在数组里面
返回值就是函数的返回值，因为它就是调用函数
因此 apply 主要跟数组有关系，比如使用 Math.max() 求数组的最大值

<script>
  // 普通函数
  function sayHi() {
    console.log(this)
  }

  let user = {
    name: '小明',
    age: 18
  }

  let student = {
    name: '小红',
    age: 16
  }

  // 调用函数并指定 this 的值
  sayHi.apply(user) // this 值为 user
  sayHi.apply(student) // this 值为 student

  // 求和函数
  function counter(x, y) {
    return x + y
  }
  // 调用 counter 函数，并传入参数
  let result = counter.apply(null, [5, 10])
  console.log(result)
</script>

总结：

apply 方法能够在调用函数的同时指定 this 的值
使用 apply 方法调用函数时，第1个参数为 this 指定的值
apply 方法第2个参数为数组，数组的单元值依次自动传入函数做为函数的参数


<script>
  const obj = {
    age: 18
  }
  function fn(x, y) {
    console.log(this) // {age: 18}
    console.log(x + y)
  }
  // 1. 调用函数
  // 2. 改变this指向 
  //  fn.apply(this指向谁, 数组参数)
  fn.apply(obj, [1, 2])
  // 3. 返回值   本身就是在调用函数，所以返回值就是函数的返回值

  // 使用场景： 求数组最大值
  // const max = Math.max(1, 2, 3)
  // console.log(max)
  const arr = [100, 44, 77]
  const max = Math.max.apply(Math, arr)
  const min = Math.min.apply(null, arr)    //利用 apply
  console.log(max, min)
  // 使用场景： 求数组最大值
  console.log(Math.max(...arr))   //利用展开运算符
</script>

思考：call和apply的区别是？

都是调用函数，都能改变this指向
参数不一样，apply传递的必须是数组

bind

bind 方法并不会调用函数，而是创建一个指定了 this 值的新函数（能改变函数内部this 指向）

使用语法：

fun.bind(thisArg, arg1, arg2, ...)

thisArg：在fun函数运行时指定的 this 值
arg1，arg2：传递的其他参数
返回由指定的 this 值和初始化参数改造的 原函数拷贝（新函数）
因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用 bind，比如改变定时器内部的this指向

<script>
  // 普通函数
  function sayHi() {
    console.log(this)
  }
  let user = {
    name: '小明',
    age: 18
  }
  // 调用 bind 指定 this 的值
  let sayHello = sayHi.bind(user);
  // 调用使用 bind 创建的新函数
  sayHello()
</script>

注：bind 方法创建新的函数，与原函数的唯一的变化是改变了 this 的值


<body>
  <button>发送短信</button>
  <script>
    const obj = {
      age: 18
    }
    function fn() {
      console.log(this)
    }

    // 1. bind 不会调用函数 
    // 2. 能改变this指向
    // 3. 返回值是个函数，  但是这个函数里面的this是更改过的obj
    const fun = fn.bind(obj)
    // console.log(fun) 
    fun()

    // 需求，有一个按钮，点击里面就禁用，2秒钟之后开启
    document.querySelector('button').addEventListener('click', function () {
      // 禁用按钮
      this.disabled = true
      window.setTimeout(function () {
        // 在这个普通函数里面，我们要this由原来的window 改为 btn
        this.disabled = false
      }.bind(this), 2000)   // 这里的this 和 btn 一样
    })
  </script>
</body>

call apply bind 总结

相同点:
- 都可以改变函数内部的this指向
区别点:
- call 和 apply 会调用函数, 并且改变函数内部this指向
- call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2..形式 apply 必须数组形式[arg]
- bind 不会调用函数, 可以改变函数内部this指向
主要应用场景:
- call 调用函数并且可以传递参数
- apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
- bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向

性能优化

节流

节流（throttle）所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数

开发使用场景案例：

小米轮播图点击效果、鼠标移动、页面尺寸缩放resize、滚动条滚动就可以加节流
- 假如一张轮播图完成切换需要300ms，不加节流效果，快速点击，则嗖嗖嗖的切换
- 加上节流效果，不管快速点击多少次， 300ms时间内，只能切换一张图片

利用节流来处理-鼠标滑过盒子显示文字要求：鼠标在盒子上移动，里面的数字就会变化+1，利用节流的方式，鼠标经过，500ms ，数字才显示

核心思路：

利用时间相减：移动后的时间 - 刚开始移动的时间 >= 500ms 我才去执行 mouseMove函数 ①：写一个节流函数throttle ，来控制这个操作函数(mouseMove)， 500ms之后才去执行这个函数 ②: 节流函数传递2个参数，第一个参数 mouseMove函数，第二个参数指定时间500ms ③：鼠标移动事件，里面写的是节流函数 ④：声明一个起始时间 startTime = 0 ⑤：但是节流函数因为里面写的函数名 throttle(mouseMove, 500), 是调用函数，无法再次调用执行，所以需要在节流函数里面写return 函数这样可以多次执行 ⑥：记录当前时间 now = Date.now() ⑦：进行判断如果大于等于 500ms，则执行函数，但是千万不要忘记让起始时间 = 现在时间

<script>
  const box = document.querySelector('.box')
  let i = 1  // 让这个变量++
  // 鼠标移动函数
  function mouseMove() {
    box.innerHTML = ++i
    // 如果里面存在大量操作 dom 的情况，可能会卡顿
  }
  // 节流函数
  function throttle(fn, t = 500) {
    let startTime = 0
    return function () {
      let now = Date.now()
      if (now - startTime >= t){
        //console.log(1)
        fn()
        startTime = now
      }
    }
  }
  // box.addEventListener('mousemove', mouseMove)
  box.addEventListener('mousemove', throttle(mouseMove, 500))

</script>

防抖

防抖（debounce）所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

开发使用场景案例：

搜索框防抖
- 假设输入就可以发送请求，但是不能每次输入都去发送请求，输入比较快发送请求会比较多
- 我们设定一个时间，假如300ms，当输入第一个字符时候，300ms后发送请求，但是在200ms的时候又输入了一个字符，则需要再等300ms 后发送请求

利用防抖来处理-鼠标滑过盒子显示文字要求：鼠标在盒子上移动，利用防抖的方式实现，鼠标停止之后，500ms后里面的数字就会变化+1

核心思路：

利用定时器实现，当鼠标滑过，判断有没有定时器，还有就清除，以最后一次滑动为准开启定时器 ①：写一个防抖函数debounce ，来控制这个操作函数(mouseMove) ②: 防抖函数传递2个参数，第一个参数 mouseMove函数，第二个参数指定时间500ms ③：鼠标移动事件，里面写的是防抖函数 ④：声明定时器变量 timeId ⑤：但是节流函数因为里面写的函数名 debounce(mouseMove, 500), 是调用函数，无法再次调用执行，所以需要在节流函数里面写return 函数这样可以多次执行 ⑥：如果有定时器，则清除定时器 ⑦: 否则开启定时器，在设定时间内，调用函数

<script>
  const box = document.querySelector('.box')
  let i = 1  // 让这个变量++
  // 鼠标移动函数
  function mouseMove() {
    box.innerHTML = ++i
    // 如果里面存在大量操作 dom 的情况，可能会卡顿
  }
  // 防抖函数
  function debounce(fn, t = 500) {
    let timeId
    return function () {
      // 如果有定时器就清除
      if (timeId) clearTimeout(timeId)
      // 开启定时器
      timeId = setTimeout(function () {
        fn()
      }, t)
    }
  }
  // box.addEventListener('mousemove', mouseMove)
  box.addEventListener('mousemove', debounce(mouseMove, 500))  // 500
  </script>

节流与防抖总结

节流和防抖的区别是？

节流: 就是指连续触发事件但是在 n 秒中只执行一次函数,比如可以利用节流实现 1s之内只能触发一次鼠标移动事件
防抖：如果在 n 秒内又触发了事件，则会重新计算函数执行时间

节流和防抖的使用场景是？

节流: 鼠标移动，页面尺寸发生变化，滚动条滚动等开销比较大的情况下
防抖: 搜索框输入，设定每次输入完毕n秒后发送请求，如果期间还有输入，则从新计算时间

语法格式案例

节流防抖素材


<body>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box')
    let i = 1  // 让这个变量++
    // 鼠标移动函数
    function mouseMove() {
      box.innerHTML = ++i
      // 如果里面存在大量操作 dom 的情况，可能会卡顿
    }
    // console.log(mouseMove)
    // 节流函数 throttle 
    function throttle(fn, t) {
      // 起始时间
      let startTime = 0
      return function () {
        // 得到当前的时间
        let now = Date.now()
        // 判断如果大于等于 500 采取调用函数
        if (now - startTime >= t) {
          // 调用函数
          fn()
          // 起始的时间 = 现在的时间   写在调用函数的下面 
          startTime = now
        }
      }
    }
    box.addEventListener('mousemove', throttle(mouseMove, 500))

    // throttle(mouseMove, 500) === function () { console.log(1) }


    // box.addEventListener('mousemove', function () {
    //   // 得到当前的时间
    //   let now = Date.now()
    //   // 判断如果大于等于 500 采取调用函数
    //   if (now - startTime >= t) {
    //     // 调用函数
    //     fn()
    //     // 起始的时间 = 现在的时间   写在调用函数的下面
    //     startTime = now
    //   }
    // })

  </script>
</body>

Lodash 库实现节流和防抖

通过引入 Lodash 库实现节流和防抖


<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 500px;
      background-color: #ccc;
      color: #fff;
      text-align: center;
      font-size: 100px;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <script src="./lodash.min.js"></script>
  <script>
    const box = document.querySelector('.box')
    let i = 1  // 让这个变量++
    // 鼠标移动函数
    function mouseMove() {
      box.innerHTML = ++i
      // 如果里面存在大量操作 dom 的情况，可能会卡顿
    }

    // box.addEventListener('mousemove', mouseMove)
    // lodash 节流写法
    // box.addEventListener('mousemove', _.throttle(mouseMove, 500))
    // lodash 防抖的写法
    box.addEventListener('mousemove', _.debounce(mouseMove, 500))

  </script>
</body>

节流综合案例

页面打开，可以记录上一次的视频播放位置

分析：

两个事件: ①：ontimeupdate 事件在视频/音频（audio/video）当前的播放位置发送改变时触发 ②：onloadeddata 事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频（audio/video）的下一帧时触发
谁需要节流？
- ontimeupdate ，触发频次太高了，我们可以设定 1秒钟触发一次

思路：

在ontimeupdate事件触发的时候，每隔1秒钟，就记录当前时间到本地存储
下次打开页面， onloadeddata 事件触发，就可以从本地存储取出时间，让视频从取出的时间播放，如果没有就默认为0s
获得当前时间 video.currentTime


<body>
  <div class="container">
    <div class="header">
      <a href="http://pip.itcast.cn">
        <img src="https://pip.itcast.cn/img/logo_v3.29b9ba72.png" alt="" />
      </a>
    </div>
    <div class="video">
      <video src="https://v.itheima.net/LapADhV6.mp4" controls></video>
    </div>
    <div class="elevator">
      <a href="javascript:;" data-ref="video">视频介绍</a>
      <a href="javascript:;" data-ref="intro">课程简介</a>
      <a href="javascript:;" data-ref="outline">评论列表</a>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
  <script>
    // 1. 获取元素  要对视频进行操作
    const video = document.querySelector('video')
    video.ontimeupdate = _.throttle(() => {
      // console.log(video.currentTime) 获得当前的视频时间
      // 把当前的时间存储到本地存储
      localStorage.setItem('currentTime', video.currentTime)
    }, 1000)

    // 打开页面触发事件，就从本地存储里面取出记录的时间， 赋值给  video.currentTime
    video.onloadeddata = () => {
      // console.log(111)
      video.currentTime = localStorage.getItem('currentTime') || 0
    }

  </script>
</body>