在绑定 scroll 、resize 这类事件时，当它发生时，它被触发的频次非常高，间隔很近。如果事件中涉及到大量的位置计算、DOM 操作、元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成，就会造成浏览器掉帧。加之用户鼠标滚动往往是连续的，就会持续触发 scroll 事件导致掉帧扩大、浏览器 CPU 使用率增加、用户体验受到影响。
简单的讲就是事件触发太频繁，浏览器来不及处理，导致页面出现卡顿。
规定函数至少间隔多久执行。
函数执行过一次后，在n秒内不能再次执行，否则推迟函数执行下一次函数调用将清除上一次的定时器，并用setTimeout重新计时 例子未使用函数防抖使用函数防抖当窗口大小发生变化时计算新的窗口大小窗口大小改变就计算大小窗口大小改变完成后计算大小验证用户输入用户每输入一个字符就进行验证用户输入完成后进行验证上面例子中如何判断窗口大小改变完成和用户输入完成？ 其实就是利用的时间间隔。当事件触发时间间隔很短时，就认为用户操作还未完成，推迟事件处理程序的执行。
<input type="text" id="input"> <script> // 简单的防抖动函数 function debounce(func, wait) { let timeout; // 定时器变量 return function() { clearTimeout(timeout); // 每次触发时先清除上一次的定时器,然后重新计时 timeout = setTimeout(func, wait); // 指定 xx ms 后触发真正想进行的操作 handler }; } //事件处理程序 function realFunc(){ console.log("Success"); } const input = document.getElementById('input'); input.addEventListener('keydown',debounce(realFunc,500)); //input.addEventListener('keydown',realFunc); </script>对比一下效果很明显
规定函数在某时间段内最多执行一次
函数在n秒内最多执行一次下一次函数调用将清除上一次的定时器 若函数执行的时间间隔小于等于规定时间间隔则用setTimeout在规定时间后再执行若函数执行的时间间隔大于规定时间间隔则执行函数，并重新计时 例子未使用函数节流使用函数节流页面滚动图片懒加载每次都会执行事件处理程序指定事件处理程序的执行频率 <script> //节流函数 function throttle(func,interval){ let timeout; let startTime = new Date(); return function (){ clearTimeout(timeout); let curTime = new Date(); if(curTime - startTime <= interval){ //小于规定时间间隔时，用setTimeout在指定时间后再执行 timeout = setTimeout(()=>{ func(); },interval) } else { //重新计时并执行函数 startTime = curTime; func() } } } //事件处理程序 function realFunc(){ console.log('success') } window.addEventListener('scroll',throttle(realFunc,100)); //window.addEventListener('scroll',realFunc); </script>首先明确一点：不管是函数节流还是函数防抖，我们减少的是事件处理程序的调用频率（上面列子的realFunc函数），而不是事件的调用频率。每次滚动、每次输入都会触发事件。 函数防抖和函数节流都用了闭包封装
何时使用函数防抖、何时使用函数节流看需求：
当我们只需要处理最后一次触发事件时，用函数防抖。如窗口大小值变化时并不需要计算中间变化的过程，只需要窗口大小改变完成后的值当事件触发过于频繁，我们需要限制事件处理程序的调用频率时，用函数节流。举个例子：我在做微信小程序的城市选择页面时，页面滚动、侧边滑动显示当前的字母索引。若不进行函数节流，函数触发太快，上一次计算还没完成又触发下一次计算，导致页面卡顿。使用函数节流后可以限制复杂操作的频率。
当我们用节流函数或防抖函数封装事件处理程序时，要注意两个问题：
事件对象的传递this的指向关于事件对象的传递可以参考这里 this的指向可以利用箭头函数或者call来绑定。 上面编写的节流函数和防抖函数只为了简述原理，网上有已经封装好的节流函数和防抖函数。
在React、Vue和小程序中使用函数节流和函数防抖
参考链接：【前端性能】高性能滚动 scroll 及页面渲染优化、函数防抖
