节流防抖函数小记

函数节流

1.高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。
2.动作绑定事件，动作发生后一段时间后触发事件，在这段时间内，如果动作又发生，则无视该动作，直到事件执行完后，才能重新触发。
3.懒加载的时间需要监听浏览器的滚动条位置（不用 每次都去触发，只要降低计算的频率），做放大镜预览的时候监听鼠标移动位置的时候，以及抢购点击多次请求。

const throttle = (fn, delay) => {
      let last = 0
      return (...args) => {
          const now = +new Date()
          if(now - last > delay){
            fn.apply(this, args)
            last = +new Date()
          }
      }
  }

函数防抖

1.触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间
2.动作绑定事件，动作发生后一定时间后触发事件，在这段时间内，如果该动作又发生，则重新等待一定时间再触发事件。
3.实时搜索，拖拽，form 表单重复提交验证

const debounce = (fn, delay) => {
      return (...args) => {
        clearTimeout(fn.id)
        fn.id = setTimeout( ()=> {
          fn.call(this,args)
        }, delay)
      }
  }

箭头函数

1. 更简洁的函数

() => {
    console.log("hellow")
}

2. 没有单独的this

在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值：
如果是该函数是一个构造函数，this指针指向一个新的对象
在严格模式下的函数调用下，this指向undefined
如果是该函数是一个对象的方法，则它的this指针指向这个对象

3. 通过 call 或 apply 调用

4. 不绑定arguments

通过 ...arguments 实现

call apply 区别

apply() 方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。
call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

该方法的语法和作用与 apply() 方法类似，只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。