BOM常用属性

发布时间：2023-03-10 09:01:58 所属栏目：教程来源：

导读：BOM 提供了一些很实用的特性，如定时器、弹出框、窗口尺寸等。

1. 弹出框
BOM 提供了三种弹出框：

window.alert 警告框
window.prompt 提示框
window.confirm 确认框
三种弹出框都会阻塞 JavaScript 的执行

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秒过去了');
}, );
setTimeout('console.log("2秒过去了...?")', );

定时器是可以取消的，一种是利用标志进行取消。

var flag = false;
setTimeout(function() {
if (flag) return;
console.log('哈哈哈哈哈哈哈哈！');
}, );
flag = !confirm('五秒后会狂笑！');

利用标志，在定时器执行的时候判断，如果标志不成立，则不执行即可。

另一种是利用 clearTimeout 方法。

var timer = setTimeout(function() {
console.log('哈哈哈哈哈哈哈哈！');
}, );
if (!confirm('五秒后会狂笑！')) {
clearTimeout(timer);
}

setTimeout 方法会返回一个数值，这个值是定时器的标志，通过传递给 clearTimeout 就可以取消定时任务。
他们效果其实差不多，但是非必要的情况下推荐使用 clearTimeout。

2.2 setInterval
setInterval 和 setTimeout 区别就在后者只会执行一次，前者会一直反复执行。

setInterval(要做的事情, 多少毫秒后做);
第一个参数和 setTimeout 一样，可以是字符串也可以是函数。

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

每过一秒钟，传递给定时器的函数就会执行一次。

setInterval 也可以被取消，但不推荐使用标志的形式，建议使用 clearInterval。

var count = ;
var timer = setInterval(function() {
console.log((++count) + '秒过去了');
if (count >= ) {
console.log('不要浪费时间盯着这里啦');
clearInterval(timer);
}
}, );

用法和 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();
});

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!