JavaScript中的节流与防抖函数记不住？我的答案保你终身难忘【一小时搞懂，建议收藏】

前端性能优化-防抖和节流

前言

防抖和节流严格算起来应该属于性能优化的知识，但实际上遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要早点掌握的。

据说阿里有一道面试题就是谈谈函数节流和函数防抖。

防抖（debounce）

函数防抖（debounce）：当持续触发事件时，在设置的周期内没有再触发事件，事件处理函数才会执行一次，如果设定的周期没有结束，又一次触发了事件，就重新开始延时。

为了有个直观的对比，我们先看下没有使用debounce技术的click事件：

我们看到，当用户频繁点击button按钮时，控制台会频繁的输出结果，这种频繁调用事件处理程序，会加重浏览器的负担，导致用户体验非常糟糕。

为了解决上述问题，我们在编码中可以使用debounce防抖技术。

防抖原理：是维护一个计时器，在规定的delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

看一个🌰（栗子）：

function debounce(fn, delay) {
   
  var timer = null;
  return function() {
   
     // 清除已存在的定时器
     timer && clearTimeout(timer)
     timer = setTimeout(<