第八章—BOM

Posted 2020-09-13 夏冷

      ECMAscript是JS的核心，而要在web上使用JS，那么BOM无疑是真正的核心。BOM叫浏览器对象模型，它

提供了许多对象，用于访问浏览器的功能。

　　BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，它有双重角色，它既是通过JS访问浏览器

的一个接口，又是ESMAScript规定的global对象。

1.全局作用域

   在全局作用域中声明的变量，函数都会成为window对象的属性和方法。这里有一个小知识点：定义全局变量和

在window对象上直接定义属性还是有点区别，全局变量不能通过delete操作直接删除，而直接在window对象上定义的属性可以删除。

 

使用var定义的window属性有一个名为（configurable）的特性，它的值设为false，所以不能删除。

2.间歇调用和超时调用

      JS是单线程语言，浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序，但它允许通过设置超时值和间歇值来调度代码在特定的时刻执行。

超时调用使用window对象的setTimeout方法，它接受两个参数：要执行的代码和以毫秒表示的时间。但是经过该时间指定的代码不一定执行。JS是一个单线程的解释器，一段时间只能执行一段代码，为了控制执行的代码，就有一个JS任务队列。

      一段js代码（里面可能包含一些setTimeout、鼠标点击、ajax等事件），从上到下开始执行，遇到setTimeout、鼠标点击等事件，异步执行它们，此时并不会影响代码主体继续往下执行(当线程中没有执行任何同步代码的前提下才会执行异步代码)，一旦异步事件执行完，回调函数返回，将它们按次序加到执行队列中，这时要注意了，如果主体代码没有执行完的话，是永远也不会触发callback的，如下例子：

1 setTimeout(function() {
2   console.log(\'hello world\');
3 }, 1000);
4 
5 while(true) {};

　　

1s中之后，控制台并没有像预料中的一样输出字符串，而网页标签上的圈圈一直转啊转，掐指一算，可能陷入while(true){}的死循环中。

定时器仅仅是在未来的某个时刻将代码添加到代码队列中，执行时机是不能保证的。代码队列按照先进先出的原则在主进程空闲后将队列中的代码交给主线程运行。而定时器对队列的工作方式是，当特定的时间过去后将代码加入到队列中。设定一个150ms后执行的定时器不代表代码会在150ms之后执行，而是指代码会在150ms后加入到代码队列中。等到主进程空闲时并且该元素位于队列首位，其中的代码便会立即执行，看上去好像是在精确的时间点上执行了。实际上队列中的所有代码都要等到主进程空闲之后才能执行，而不管他们是怎样添加到队列中去的。

var ele = document.getElementById(\'btn\');
ele.onclick = function(){
    setTimeout(function(){
        document.getElementById(message).style.backgroundColor = "red";
    }, 255);
    var start = Date.now();
    while(Date.now() - start < 300) {};
}

　　在这里Date.now()方法返回是从1970年1月1号到今天的毫秒数和（+new Date及 new Date中的getTime（）方法相同）

以上示例中，定时器在255ms事被插入到代码队列中，但javascript主线程有300ms处于运行状态，那么定时器代码至少要在定时器设置之后的300ms后才会被执行。以下时间线代表了上面代码的执行过程。

 

调用setTimeout（）方法后，该方法会返回一个数值ID，表示超时调用。这个超时调用ID是计划执行的唯一代码，可以通过它来取消超时调用.

只要是在指定的时间还没有过去之前调用clearTimeout，就可以取消超时调用。

注意：

setInterval（）方法

        间隙调用和超时调用类似。只不过它会按照指定的时间重复执行代码，直至间隙调用被取消，或者页面被卸载。

        为了确保定时器代码插入到队列总的最小间隔为指定时间。当使用setInterval()时，仅当没有该定时器的任何其他代码实例时，才能将定时器代码添加到代码队列中。假设没有这条原则，setInterval()创建的定时器确保了定时器代码能够规则的插入队列中。那么问题来了，假设Javascript主进程的运行时间非常长，那么setInterval的代码被多次添加到了代码队列中，等到主进程空闲时，定时器代码便会连续执行多次而之间不会有任何停顿。

　　但是这条规则同样也带来了两个问题：

1. 某些间隔会被跳过
2. 多个定时器的代码执行之间的间隔可能会比预期的小（当前的setInterval回调正在执行，后一个添加）。

 如下面代码：

var ele = document.getElementById(\'btn\');
ele.onclick = function(){
    setInterval(function(){
　　　　console.log(\'run interval\');
        var start = Date.now();
        while(Date.now() - start < 350) {};
    }, 200);
    var start = Date.now();
    while(Date.now() - start < 300) {};

　　

上图中，第一个定时器在205ms出添加到队列中的，但是直到过了300ms才能够执行。当执行定时器代码时，在405ms时有一个定时器代码实例被添加到等待队列中。在605ms处第一个定时器代码仍然在运行，同时在代码队列中已经有了另一个定时器的代码实例。所以在这个605处的定时器代码不会被添加到队列中。结果在205ms处添加的定时器代码执行完毕后，405ms处添加的定时器代码会立即执行。

　为了避免setInterval的两个缺点，可以使用链式setTimeout（）：

setTimeout(function(){
    //其他处理
    setTimeout(arguments.callee, interval);
}, interval);

　　 JS书上的实例，可以使用setTimeout来模拟setInterval（）方法。