PJCHENder 未整理筆記

[WebAPIs] Window 物件

2018-06-27

[WebAPIs] Window 物件

@(JavaScript)[JavaScript, WebAPIs]

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

1
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),本質上是一樣的:

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

如果要考慮跨瀏覽器兼容性(cross-browser capability)的話,建議使用下面的寫法:

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

window.scrollY @ MDN

捲軸捲到特定位置:scroll, scrollTo

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

1
2
3
4
5
6
7
8
9
10
11
12
/**
* 直接將捲軸捲動到特定的位置
**/

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

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

捲軸捲動相對的距離:scrollBy

1
2
3
4
5
6
7
8
9
10
11
// 將捲軸捲動特定的距離
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()

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

使用範例:

1
2
3
4
5
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)

Tags: WebAPIs

掃描二維條碼,分享此文章