防抖debounce和节流throttle

防抖

定义：频繁输入、频繁操作的时候，在最后才触发事件处理函数 。

应用场景：

1、input框搜索，监听value值的变化，只要值变化就触发搜索方法。使用防抖函数，在用户输入完成后，再触发搜索方法。
2、window的resize事件，只要浏览器窗口大小发生变化，就会触发。使用防抖函数，让其只在最后变化时触发一次。

实现思路：

步骤1：事件触发时，创建定时器timer，在一定时间后执行该定时器，定时器中对事件进行处理并清除当前定时器。

步骤2：如果事件在定时器有效时间内再次触发，则清除当前定时器，并再次执行步骤1。

code：

function debounce(fn, delay = 500) {
  let timer = null
  return function () {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      // 1.修复this指向，让fn中的this指向return函数中的this；return函数中的this指向调用他的对象，比如input；
      // 注意：如果fn使用了箭头函数写法，this指向父级的this - window
      // 2.传递参数
      fn.apply(this, arguments)
      timer = null
    }, delay)
  }
}

let input = document.getElementsByTagName("input")[0]

input.addEventListener("keyup", debounce(function () {
  console.log(this, "此处this指向input")
  // 事件处理函数...
}), 600)

input.addEventListener("keyup", debounce(() => {
  console.log(this, "此处this指向父级的this - window")
  // 事件处理函数...
}, 600))

节流

定义：频繁输入、频繁操作的时候，保持一定频率连续触发。

应用场景：

1、button的click事件，使用节流函数，单位时间内只触发一次。
2、window的scroll事件，只要浏览器发生滚动，就会触发。使用节流函数，单位时间内只触发一次，比如是否滑到底部自动加载更多。
3、元素的拖拽事件，使用节流函数，单位时间内只触发一次。

实现思路：

步骤1：事件触发时，创建定时器timer，在一定时间后执行该定时器，定时器中对事件进行处理并清除当前定时器。

步骤2：如果事件在定时器有效时间内再次触发，则返回不做任何处理。

code：

function throttle(fn, delay = 100) {
  let timer = null
  return function () {
    if(timer) return
    timer = setTimeout(() => {
      // 需要将参数e通过arguments传递给fn函数，参数e默认是传给throttle函数
      fn.apply(this, arguments)
      timer = null
    }, delay)
  }
}

div.addEventListener("drag", throttle(function (e) {
  // 事件处理函数...
  console.log(e.offsetX, e.offsetY)
}, 200))		

防抖和节流的比较

相同点：

目的都是进行性能优化，减少操作高频触发

不同点：

防抖是触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。适用于可以多次触发但触发只生效最后一次的场景。

节流是高频事件触发，但在n秒内只会执行一次，如果n秒内触发多次函数，只有一次生效，节流会稀释函数的执行频率。