BOM 定时器JS执行机制

BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口交互的对象 ， 其核心对象是window

由一系列对象构成 ， 并且每个对象都提供了很多方法和属性

• 把浏览器当成一个对象来看
• BOM的顶级对象是window
• BOM学习的是浏览器窗口交互的一些对象
• BOM是浏览器厂商在各自浏览器上定义的 ， 兼容性较差

BOM的构成

window对象是浏览器的顶级对象，具有双重角色

1. 它是js访问浏览器的一个接口
2. 它是一个全局对象 ， 定义在全局作用域的变量 ， 函数都会变成window对象的属性和方法

注意：特殊属性window . name

window对象的常见加载事件

窗口加载事件

window . onload 是窗口加载事件 ， 当文档内容完全加载完成后会触发该事件（包括图像、CSS、文件），就调用的处理函数

注意：

有了window . onload就可以把JS写到页面元素的上方 ， 因为 onload 是等页面内容全部加载完毕 ，再去执行处理函数

window . onload 传统注册事件方式只能写一个 ， 如果有多个 ， 会以最后一个window . load为准

如果使用addEventListener则没有限制

DOMContentLoaded事件

document.addEventListener('DOMContentLoaded',function(){})

DOMContentLoaded事件触发时 ， 仅当DOM加载完成 ， 不包括样式表 ， 图片 ， flash

调整窗口大小事件

window . onresize 是调整窗口大小加载事件 ，当触发时就调用的处理函数

注意：

只要窗口大小发生像素变化 ， 就会触发这个事件

我们经常利用这个事件完成响应式布局 ， window . innerWidth 当前屏幕的宽度

定时器

setTimeout（）定时器

window . setTimeout ( 调用函数，[ 延迟的毫秒数 ] )

window . setTimeout（）方法用于设置一个定时器 ，该定时器在定时器到期后执行调用函数

注意

1. 这个window在调用的时候可以省略
2. 延时时间单位是毫秒 但是可以省略  默认是0
3. 这个调用函数可以直接写函数 ， 还可以写函数名 ， 或‘函数名（）’
4. 页面中可能有多个定时器 ， 经常给定时器加标识符

里面的函数也称为回调函数callback

普通函数是按照代码顺序直接调用

而回调函数需要等待时间 ， 时间到了才去调用这个函数 ， 因此称为回调函数

停止setTimeout（）定时器

window . clearTimeout（timeout ID）

注意：window可以省略 ， 里面参数就是定时器的标识符

setInterval（）定时器

window . setInterval（回调函数 ， [ 间隔的毫秒数 ]）

setInterval（）方法重复调用一个函数 ， 每隔这个时间 ， 就去调用一次回调函数

注意

1. 这个window在调用的时候可以省略
2. 间隔毫秒数默认是0 ， 如果写 ， 必须是毫秒 ， 表示每隔多少毫秒调用这个函数
3. 这个调用函数可以直接写函数 ， 还可以写函数名 ， 或‘函数名（）’
4. 页面中可能有多个定时器 ， 经常给定时器加标识符

停止setInterval（）定时器

window . clearInterval（）方法取消了先前通过调用setInterval（）建立的定时器

注意：window可以省略 ， 里面参数就是定时器的标识符 

this

this的指向在函数定义的时候是确定不了的 ， 只有函数执行的时候才能确定this到底指向谁 ，一般情况下this的最终指向是那个调用它的对象

1. 全局作用域，普通函数，定时器里面this都是指向window
2. 事件发生this会指向调用函数的那个对象
3. 构造函数中this指向的是实例对象，new创建的那个对象

JS执行机制

1. 先执行执行栈中的同步任务
2. 异步任务（回调函数）放入任务队列当中
3. 一旦执行栈中同步任务执行完毕，按次序读取任务队列中的异步任务，被读取的异步任务结束等待状态，进入执行栈，开始执行

JS是单线程但现在允许创建多个任务

同步

前一个任务结束再执行下一个任务、程序的执行顺序与任务的排列顺序是一致的

同步任务

在主线程上执行 ， 形成一个执行栈

异步

在做一件事的时候，因为这件事会处理很长时间，可以用这些时间处理其他事情

异步任务

一般来说 ， 异步任务是通过回调函数来实现的

有三种类型：

1. 普通事件：click、resize
2. 资源加载：load、error
3. 定时器：setInterval、setTimeout

异步任务相关回调函数添加到任务队列中（也称消息队列）

本质区别：各个流程的执行顺序不同

由于主线程不断重复获得任务，执行任务，再获取，再执行这种机制被称为事件循环