說幾個(gè)場景。

• 提交按鈕1秒內(nèi)連續(xù)多次點(diǎn)擊 => 我只想觸發(fā)一次提交函數(shù) 【防抖】
• 實(shí)時(shí)搜索的時(shí)候，我還在打拼音的時(shí)候不想立馬觸發(fā)搜索函數(shù)，會(huì)卡死 => 我想輸入完一個(gè)詞再觸發(fā) , 或者解讀當(dāng)我在不停的輸入的時(shí)候，每隔500ms搜索一下。 【節(jié)流】
• 但我滑動(dòng)過一個(gè)頁面長度的時(shí)候，網(wǎng)頁右下角出現(xiàn)一個(gè)“回到頂部”的按鈕=> scroll太頻繁，我不想觸發(fā)太頻繁，可以設(shè)置直到滑動(dòng)結(jié)束才判定 【防抖】，也可以滑動(dòng)時(shí)每隔500ms斷定一次 【節(jié)流】

總結(jié)

防抖：是將多次執(zhí)行變?yōu)樽詈笠淮螆?zhí)行
節(jié)流：是將多次執(zhí)行變?yōu)槊扛粢欢螘r(shí)間執(zhí)行

JS代碼

/**
 * 防抖 是將多次執(zhí)行變?yōu)樽詈笠淮螆?zhí)行
 * @param {*} fn 要執(zhí)行的函數(shù)
 * @param {*} delay 響應(yīng)的毫秒
 * @returns 
 */
function debounce (fn, delay = 1000) = {
  let timer = null 
  return function() {
      if(timer){clearTimeout(timer) }
      timer = setTimeout(fn,delay) // 簡化寫法
  }
}

/**
 * 節(jié)流 是將多次執(zhí)行變?yōu)槊扛粢欢螘r(shí)間執(zhí)行
 * @param {*} fn 要執(zhí)行的函數(shù)
 * @param {*} delay  響應(yīng)的毫秒
 * @returns 
 */
 function throttle(fn, delay = 1000) = {
  let timer = null;
  return function() {
      if(timer) {
          return;
      }
      timer = setTimeout(() => {
          fn.apply(this, arguments);
          timer = null;
      }, delay)
  }
}