函式防抖（debounce）：當持續觸發事件時，一定時間段內沒有再觸發事件，事件處理函式才會執行一次，如果設定的時間到來之前，又一次觸發了事件，就重新開始延時。舉個栗子，持續觸發scroll事件時，並不執行handle函式，當1000毫秒內沒有觸發scroll事件時，才會延時觸發scroll事件。

函式節流（throttle）：當持續觸發事件時，保證一定時間段內只調用一次事件處理函式。節流通俗解釋就比如我們水龍頭放水，閥門一開啟，水嘩嘩的往下流，秉著勤儉節約的優良傳統美德，我們要把水龍頭關小點，最好是如我們心意按照一定規律在某個時間間隔內一滴一滴的往下滴。舉個栗子，持續觸發scroll事件時，並不立即執行handle函式，每隔1000毫秒才會執行一次handle函式。

防抖例項：

<script>
const delay = (function () {
  let timer = 0
  return function (callback, ms) {
    clearTimeout(timer)
    timer = setTimeout(callback, ms)
  }
})()
export default {
methods：{
fn() {
      delay(() => {
        //執行部分
      }, 500)
}
}
}
</script>

節流例項：

var throttle = function(func, delay) {
var timer = null;
return function() {
var context = this;
var args = arguments;
if (!timer) {
timer = setTimeout(function() {
func.apply(context, args);
timer = null;
}, delay);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener(‘scroll’, throttle(handle, 1000));

更多內容請見原文，原文轉載自：https://blog.csdn.net/weixin_44519496/article/details/119353120