一道筆試題：利用JS程式碼實現防抖和節流

最小生成树發表於2024-08-23
筆試JS

防抖 (Debounce)

防抖的目的是在一系列連續的呼叫中，只有在最後一次呼叫後的一段時間內沒有新的呼叫才會執行該函式。這對於一些需要在使用者停止操作後才執行的場景非常有用，比如輸入框的搜尋建議。

function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      func.apply(context, args);
    }, wait);
  };
}

節流 (Throttle)

節流的目的是保證一個函式在一定時間內只被呼叫一次。這可以確保函式不會因為高頻觸發而消耗過多資源。例如，當使用者滾動頁面時，我們可能只想每隔一段時間才更新資料。

function throttle(func, limit) {
  let inThrottle;
  return function() {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(function() {
        inThrottle = false;
      }, limit);
    }
  };
}

// 使用防抖
const debouncedFunction = debounce(function() {
  console.log('This will be logged after 500ms of silence.');
}, 500);

window.addEventListener('resize', debouncedFunction);

// 使用節流
const throttledFunction = throttle(function() {
  console.log('This will be logged at most once every second.');
}, 1000);

window.addEventListener('scroll', throttledFunction);

像這種基本的而且常用的知識還是挺容易考的

相關文章