Slide In on Scroll

延遲載入圖片，當滾輪滾到頁面時再做載入
滑到圖片一半時，圖片會由左右兩側滑入
當滑到圖片底部，圖片會向左右滑出

實作

選擇所有image element，並在window上監聽滾輪事件
```
const sliderImages = document.querySelectorAll('.slide-in');
function checkSlide(e) {
console.log(e)
}
window.addEventListener('scroll', checkSlide);
```
可以看到log出非常多監聽結果，這也間接影響到效能，所以我們必須要做debounce，過一段時間再回傳監聽結果

設定debounce

function debounce(func, wait = 20, immediate = true) {
   var timeout;
   return function () {
     var context = this, args = arguments;
     var later = function () {
       timeout = null;
       if (!immediate) func.apply(context, args);
     };
     var callNow = immediate && !timeout;
     clearTimeout(timeout);
     timeout = setTimeout(later, wait);
     if (callNow) func.apply(context, args);
   };
 }

取得每張圖片要滑入的高度
取得目前滾輪滾了多少再加上當前視窗高度，就是目前視窗最底到document頂部的距離，另外因為要在滑到半張圖片時做滑入，所以要再扣除半張圖片高度
```
const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
```

取得每張圖片要滑出的高度

 const imageBottom = sliderImage.offsetTop + sliderImage.height;

滑入的時機點必須在目前視窗底部介於圖片的一半與圖片底部之間，離開底部後將圖片滑出

 const isHalfShown = slideInAt > sliderImage.offsetTop;
 const isNotScrolledPast = window.scrollY < imageBottom;

 if (isHalfShown && isNotScrolledPast) {
   sliderImage.classList.add('active');
 } else {
   sliderImage.classList.remove('active');
 }

知識點

window.scrollY，JavaScript中獲取在瀏覽器中Y軸已滾動的距離
window.innerHeight JavaScript中獲取目前瀏覽器可視窗口的內部高度(viewport)

Debounce

在 JavaScript 中，debounce 是一個常用的技巧，它的主要功用是控制連續觸發的事件或函數執行頻率，以減少不必要的執行次數，提高性能和優化用戶體驗。

Debounce 的作用可以簡單描述如下：

延遲執行：Debounce 會等待某個事件在特定時間內不再觸發，然後才執行相關的操作。這個時間間隔稱為 debounce 時間。
過濾重複事件：當事件在 debounce 時間內連續觸發，debounce 會忽略這些連續事件，只執行最後一次觸發的操作。這避免了不必要的重複處理。

Debounce 常見的應用場景包括：

搜索欄實時搜索：當用戶輸入搜索關鍵詞時，使用 debounce 可以避免在每個鍵盤敲擊時都觸發搜索請求，而是等待用戶停止輸入一小段時間後才執行實際的搜索。
窗口大小調整事件：當用戶調整瀏覽器窗口大小時，使用 debounce 可以確保只在用戶停止調整窗口大小時執行相關的調整佈局操作。
滾動事件：當用戶滾動網頁時，使用 debounce 可以減少處理滾動事件的頻率，以提高性能。

以下是一個簡單的 JavaScript 範例，演示了如何實現 debounce：

function debounce(func, delay) {
  let timerId;

  return function () {
    const context = this;
    const args = arguments;

    clearTimeout(timerId);
    timerId = setTimeout(function () {
      func.apply(context, args);
    }, delay);
  };
}

// 使用 debounce 來包裝一個函數，延遲執行至少 300 毫秒
const debouncedSearch = debounce(function () {
  // 執行搜索操作
  console.log("Searching...");
}, 300);

// 綁定事件處理函數，當用戶輸入時觸發 debounce
document.getElementById("search-input").addEventListener("input", debouncedSearch);

在這個示例中，debounce 函數接受一個函數 func 和一個延遲時間 delay，並返回一個新的函數。這個新的函數將在觸發時延遲 delay 毫秒，如果在這段時間內連續觸發，則會重置計時器，直到不再觸發事件，然後執行 func。這樣可以確保 func 只在用戶停止輸入或操作一段時間後才執行。