关于js中的函数防抖与节流

听说函数防抖与节流不是一次两次了，这次稍微记录一下
防抖，为啥要取这个名字，好吧，盲猜是因为以前操作dom元素过多过快，然后页面的重绘速度跟不上，然后产生的页面的抖动吧，hhhh。

一、防抖

防抖：在频繁的触发后，只执行一次，触发的一开始执行或者结束的时候执行。

对应的dome函数1，只执行最后一次

对应的dome2函数，一开始就执行

对应的dome3,综合一下，传递参数来控制，是一开始执行还是最后执行

防抖的应用场景：
1、实时监听输入框然后去请求数据
2、快速点击点赞或者取消点赞

二、节流

节流：频繁的触发事件时，在一定的时间内只触发一次。

对应的dome1

对应的dome2

对应的dome3

节流的应用场景：
1、页面上的滚动监听
2、页面的视窗变化

三、关于this的指向问题

1、this，我们终究还是得记住一句话，谁用它，this就指向谁
在上面的函数中，this的指向，都是指向调用改方法的元素。
那么可以知道：函数在没有return之前，都是指向的window。
如果return使用 () => 函数，那么里面的this也会指向window，虽然程序可以跑(毕竟东西都是挂在window上的，它就是爸爸)，但是可能会导致this指向混乱。

四、关于apply方法

1、apply()方法能劫持另外一个对象的方法，继承另外一个对象的属性
2、fn.apply(obj,args)方法能接收两个参数
3、obj：这个对象将代替Function类里this对象
4、args：这个是数组，它将作为参数传给Function（args–>arguments）

五、可以复制的代码

节流：

function throttle3(fn,wait,type) {
// type 1 时间戳，2定时器
if(type===1) {
let date = 0
} else if (type === 2) {
let timer = undefined
}
return function () {
if(type === 1) {
  let now = Date.now()
  if(now-date > wait) {
    fn.apply(this,arguments)
    date = now
  }
} else if (type === 2) {
  if(!timer) {
    timer = setTimeout(() => {
      timer = undefined
fn.apply(this,arguments)
    },wait)
  }
    }
 }
}

防抖：

function debnuce3(fn,wait,isFast) {
 // isFast 第一次执行还是末尾才执行
let timer = undefined
return function () {
let agms = arguments
if(timer) {
  clearTimeout(timer)
}
if(isFast) {
  let timerNow = !timer
  timer = setTimeout(() => {
    timer = undefined
},wait)
  if(timerNow) {
    fn.apply(this,agms)
  }
} else {
  timer = setTimeout(() => {
    fn.apply(this,agms)
  },wait)
    }
   }
}