跳至主要内容

[WebAPIs] Window 物件

keywords: window​

Window Object @ MDN WebAPIs

執行緒與時間處理相關​

window.requestIdleCallback()​

透過 window.requestIdleCallback() 方法可以把一個函式先放入佇列（queues）中，直到瀏覽器處於閒置狀態（idle periods）時才去執行。這可以讓開發者在不要影響到 latency-critical events （如，動畫、使用者輸入時）執行背景或重要性較低的工作。

一般來說函式都是 **FIFO（first-in-first-out）**的順序，但是帶有 timeout 的 callback 則稱作 out-of-order。

var handleID = window.requestIdleCallback(callback[, options]);

延伸閱讀：Cooperative Scheduling of Background Tasks API @ MDN Background Tasks API

setTimeout, setInterval, requestAnimationFrame​

參考筆記：[計時與動畫 Timer with setInterval, setTimeout, requestAnimationFrame.md]([WEB] 計時與動畫 Timer with setInterval, setTimeout, requestAnimationFrame.md)

Scroll 捲動事件​

取得瀏覽器捲軸的位置: scrollY, pageYOffset​

window.pageYOffset 只是 window.scrollY 的另一個名稱（alias），本質上是一樣的：

window.scrollY;
window.pageYOffset == window.scrollY; // always true。

如果要考慮跨瀏覽器兼容性（cross-browser capability）的話，建議使用下面的寫法：

var start = window.pageYOffset || document.documentElement.scrollTop;

window.scrollY @ MDN

捲軸捲到特定位置：scroll, scrollTo​

window.scroll() 和 window.scrollTo() 的效能一樣，但 window.scrollTo() 的瀏覽器兼容性比較好：

/**
 * 直接將捲軸捲動到特定的位置
 **/

window.scrollTo(x - coord, y - coord);

// 改變捲動的行為，使其變成平滑捲動
window.scrollTo({
  top: yCoord, // optional
  left: xCoord, // optional
  behavior: 'smooth', // smooth, instant, auto(default)
});

捲軸捲動相對的距離：scrollBy​

// 將捲軸捲動特定的距離
window.scrollBy(x - coord, y - coord);

// 捲動一個 viewport height
window.scrollBy(0, window.innerHeight);

// 平滑捲動
window.scrollBy({
  top: window.innerHeight,
  behavior: 'smooth',
});

Layout 相關​

使用 CSS Media Query : Window.matchMedia()​

mql = window.matchMedia(mediaQueryString);
mql.matches; // 回傳 true 或 false

使用範例：

if (window.matchMedia('(min-width: 400px)').matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

座標系統相關​

參考筆記 [Browser Coordinate System 瀏覽器座標系統]([WEB] Browser Coordinate System 瀏覽器座標系統.md)