以文字輸入框為例，連續輸入時，不會觸發動作(比如：查詢資料庫)，要停止輸入並等待一段時間後才觸發動作。

下面的程式會在每次輸入時，清除前一個 setTimeout 並設置一個新的 setTimeout，直到停止輸入，並等待設定的秒數(這個例子是一秒)後觸發動作。

簡單的版本：

let timer;

inputText.addEventListener('input', (e) => {
  clearTimeout(timer);

  timer = setTimeout(() => {
    showArea.textContent = e.target.value; // 要觸發的動作
  }, 1000);
});

Demo
https://www.yuantw.com/demo/js-debounce-1/

———

網路上的資料都是把 debounce 寫成函式：

inputText.addEventListener('input', debounce(showData));

function debounce(fn, delay = 1000) {
  let timer;

  // return 的 function 是 inputText.addEventListener 的 event handler
  return (e) => {
    clearTimeout(timer);

    timer = setTimeout(() => {
      fn(e);
    }, delay);
  };
}

function showData(e) {
  showInfo.textContent = e.target.value;
}

Demo
https://www.yuantw.com/demo/js-debounce-2/

———

上面二個例子的行為是，等一串事件發生後，只觸發一次。

debounce 也可以實作成，立即觸發，忽略後面連續的一串事件。

簡單的版本：

let timeoutID;

btn.addEventListener('click', () => {
  if (!timeoutID) {
    console.log(new Date());
  }

  clearTimeout(timeoutID);

  timeoutID = setTimeout(() => {
    timeoutID = null; // reset
  }, 1000);
});

———

下面的程式碼是從 JavaScript30 13 – Slide in on Scroll 修改

function debounce(func, wait = 1000, immediate = true) {
  let timeoutID;

  return (e) => {
    if (immediate && !timeoutID) {
      func(e);
    }

    clearTimeout(timeoutID);

    timeoutID = setTimeout(() => {
      timeoutID = null; // reset

      if (!immediate) {
        func(e);
      }
    }, wait);
  };
}

參考連結：

• 什麼是防抖 (debounce)？如何實踐防抖 (debounce) 函式？
• 一次搞懂前端開發者不可不知的Debounce與Throttle (手把手教學)
• Debounce & Throttle

網頁包含三個 div。

div 的 CSS 設定：

box-sizing: border-box;

width: 300px;
height: 500px;

margin: 20px auto;
padding: 10px;

border: 5px solid #eee;

每個 div 的高度為：border + padding + 內容 = 500px

第一個 div 跟第二個 div 之間的 margin + 第二個 div 跟第三個 div 之間的 margin(div 之間的 margin 會重疊)：20px + 20px

再加上第一個 div 的 margin(top) 跟最後一個 div 的 margin(bottom)：20px + 20px

全網頁高度為：20px + 500px + 20px + 500px + 20px + 500px + 20px = 1580px

JS 的部份，document.documentElement 指的是 html 元素。

Demo
https://www.yuantw.com/demo/js-offset-height/

跟著 Udemy 的課程 JavaScript Web Projects: 20 Projects to Build Your Portfolio 做練習。

這個練習是從 Unsplash 的 API 取得圖片，當捲軸快滑到底部時，再次從 API 取得圖片。

在 JS 裡有監聽 scroll 事件。

scroll 事件會連續觸發，導致連續跟 Unsplash API 要圖檔，為了避免這個狀況，可以新增一個變數(imgLoadedStatus)當作開關，值為布林值。

Demo
https://www.yuantw.com/demo/infinity-scroll/