BOM 常用屬性和方法

BOM 提供了一些很實用的特性，如定時器、彈出框、窗口尺寸等。

1. 彈出框

BOM 提供了三種彈出框：

• window.alert 警告框
• window.prompt 提示框
• window.confirm 確認框

三種彈出框都會阻塞 JavaScript 的執行，用戶與彈出框交互后才會繼續執行代碼。

調用彈出框時可以省略 window。

1.1 警告框

警告框在 demo 和調試過程中比較常用。

window.alert('彈出！');

alert 方法接受一個參數，即要提示的內容。

警告框沒有其他交互，只有單純的提示作用。

因為警告框長得不是很好看，在各個瀏覽器下的樣式也不統一，所以正式產品很少會用到。

1.2 提示框

提示框也可以用于提示信息，同時還能向用戶收集信息。

var 用戶輸入的內容 = window.prompt(提示信息, 輸入框內的默認值);

var result = window.prompt('操作不可逆，請輸入 "確認" 以繼續操作', '不了不了');

if (result === '確認') {
  alert('操作成功');
}

1.3 確認框

確認框可以展示信息，同時詢問用戶是確定還是取消。

var 用戶選擇的結果 = window.confirm(提示信息);

var result = window.confirm('確定要刪除這條信息嗎？');

if (result) {
  alert('刪除成功');
} else {
  console.log('已取消');
}

部分中后臺系統的關鍵才做會使用彈出框，因為彈出框調用后整個窗口是無法操作的，可以提高警示作用。

2. 定時器

定時器特別常用，前面提到的事件優化中的節流防抖，也有定時器參與。

BOM 提供了兩種定時器：

• window.setTimeout 在一定時間后做一些事情
• window.setInterval 每隔一段事件做一些事情

定時器并不是精確的，會因為上下文環境的各種因素產生偏差。

定時器的最小延遲事件是 4ms ，其在 HTML5 spec有被描述。

現代瀏覽器為了優化后臺性能損耗等，使在非當前 tab 的頁面中的定時器的最小延遲在 1000ms 以上。

2.1 setTimeout

setTimeout()方法設置一個定時器，該定時器在定時器到期后執行一個函數或指定的一段代碼。(MDN)

使用 setTimeout 創建的定時器會在一定時間后最一次事情，做完后就再也不會調用了。

setTimeout(要做的事情, 多少毫秒后做);

其中 要做的事情 可以是個函數，也可以是個字符串，但幾乎沒有使用字符串的場景，也不推薦使用字符串，原因可以參考 eval 相關內容。

setTimeout(function() {
  console.log('1秒過去了');
}, 1000);

setTimeout('console.log("2秒過去了...?")', 2000);

定時器是可以取消的，一種是利用標志進行取消。

var flag = false;

setTimeout(function() {
  if (flag) return;
  console.log('哈哈哈哈哈哈哈哈！');
}, 5000);

flag = !confirm('五秒后會狂笑！');

利用標志，在定時器執行的時候判斷，如果標志不成立，則不執行即可。

另一種是利用 clearTimeout 方法。

var timer = setTimeout(function() {
  console.log('哈哈哈哈哈哈哈哈！');
}, 5000);

if (!confirm('五秒后會狂笑！')) {
  clearTimeout(timer);
}

setTimeout 方法會返回一個數值，這個值是定時器的標志，通過傳遞給 clearTimeout 就可以取消定時任務。
他們效果其實差不多，但是非必要的情況下推薦使用 clearTimeout。

2.2 setInterval

setInterval 和 setTimeout 區別就在后者只會執行一次，前者會一直反復執行。

setInterval(要做的事情, 多少毫秒后做);

第一個參數和 setTimeout 一樣，可以是字符串也可以是函數。

var count = 0;
setInterval(function() {
  console.log((++count) + '秒過去了');
}, 1000);

每過一秒鐘，傳遞給定時器的函數就會執行一次。

setInterval 也可以被取消，但不推薦使用標志的形式，建議使用 clearInterval。

var count = 0;

var timer = setInterval(function() {
  console.log((++count) + '秒過去了');

  if (count >= 3) {
    console.log('不要浪費時間盯著這里啦');
    clearInterval(timer);
  }
}, 1000);

用法和 clearTimeout 幾乎一致，就不再贅述了。

3. 當前窗口的尺寸

通過 innerHeight 和 innerWidth 屬性就可以獲取到當前窗口的視口尺寸，視口可以理解為窗口中顯示頁面的部分。

function logSize() {
  var width = window.innerWidth;
  var height = window.innerHeight;

  console.log('窗口尺寸：' + width + 'x' + height);
}

logSize();

window.addEventListener('resize', function() {
  logSize();
});

4. 其他

5. 小結

開發網頁應用的時候，BOM 相關的屬性和方法用到的比較多的就是定時器和獲取窗口尺寸。

window 下還有類似 parseInt、parseFloat 這樣的數學相關的方法，但目前 ES6 標準將他們挪動到了 Number 下，也就是說可以通過 Number.parseInt 來調用，放到了本該屬于他們的地方，但項目中如果要使用，推薦使用 shim 或者 polyfill，不然部分瀏覽器可能不支持。