用js寫一個繫結事件檢測視窗大小

王铁柱6發表於2024-12-03
JS事件
function handleResize() {
  const width = window.innerWidth;
  const height = window.innerHeight;

  // 在這裡執行你想要的操作，例如更新佈局或顯示不同的內容
  console.log(`視窗寬度：${width}px，視窗高度：${height}px`);

  //  一些例子：
  // if (width < 768) {
  //   // 在小螢幕上執行某些操作
  // } else {
  //   // 在大螢幕上執行其他操作
  // }
}


// 初始載入時執行一次
handleResize();

// 繫結 resize 事件
window.addEventListener('resize', handleResize);


// 可選：使用 debounce 或 throttle 最佳化效能，尤其是在 resize 事件頻繁觸發的情況下

// Debounce 函式 (lodash 或自己實現)
// function debounce(func, wait) {
//   let timeout;
//   return function() {
//     const context = this;
//     const args = arguments;
//     clearTimeout(timeout);
//     timeout = setTimeout(() => func.apply(context, args), wait);
//   };
// }

// 使用 debounce
// window.addEventListener('resize', debounce(handleResize, 200)); // 200ms 的延遲


// Throttle 函式 (lodash 或自己實現)
// function throttle(func, limit) {
//   let inThrottle;
//   return function() {
//     const args = arguments;
//     const context = this;
//     if (!inThrottle) {
//       func.apply(context, args);
//       inThrottle = true;
//       setTimeout(() => inThrottle = false, limit);
//     }
//   };
// }

// 使用 Throttle
// window.addEventListener('resize', throttle(handleResize, 200)); // 最多每 200ms 執行一次


//  移除事件監聽器 (如果需要)
// window.removeEventListener('resize', handleResize); //  或者使用 debounce/throttle 版本的 handleResize

程式碼解釋:

  1. handleResize() 函式: 這個函式包含了在視窗大小改變時需要執行的程式碼。 它獲取當前視窗的寬度 (window.innerWidth) 和高度 (window.innerHeight)，並將其列印到控制檯。 你可以在這裡替換成你自己的邏輯。

  2. 初始呼叫 handleResize(): 在頁面載入完成後立即呼叫 handleResize() 函式，以確保初始狀態下也能正確設定樣式或執行其他操作。

  3. window.addEventListener('resize', handleResize): 這行程式碼將 handleResize 函式繫結到 resize 事件上。每當視窗大小改變時，瀏覽器都會觸發 resize 事件，並執行 handleResize 函式。

  4. Debounce 和 Throttle (可選): resize 事件可能會在短時間內頻繁觸發，例如使用者拖動視窗大小的時候。這可能會導致效能問題。 Debounce 和 Throttle 兩種技術可以用來最佳化效能：

    • Debounce: 在指定的時間間隔內，如果事件再次觸發，則會重置計時器。只有當事件停止觸發一段時間後，才會執行函式。 適用於使用者停止調整大小後才更新佈局的場景。
    • Throttle: 在指定的時間間隔內，最多隻執行一次函式。 適用於需要實時響應大小變化，但又不想過於頻繁執行函式的場景。

  5. window.removeEventListener() (可選): 如果你需要在某個時刻停止監聽 resize 事件，可以使用 window.removeEventListener('resize', handleResize) 來移除事件監聽器。 確保傳入與新增監聽器時相同的函式引用 (例如，如果使用了 debounce/throttle，則傳入 debounce/throttle 返回的函式)。

如何使用:

  1. 將程式碼複製到你的 JavaScript 檔案中 (例如 script.js)。
  2. 在 HTML 檔案中引入 JavaScript 檔案: <script src="script.js"></script> 最好放在 </body> 結束標籤之前。

現在，每當視窗大小改變時，你都會在控制檯中看到輸出的寬度和高度。 你可以根據這些值來調整你的頁面佈局或執行其他操作。

希望這個解釋能夠幫助你理解如何使用 JavaScript 檢測視窗大小變化!

相關文章