BOM重点核心（定时器+JS执行机制+location对象）

目录

1.BOM概述

BOM的构成

window对象的常见事件

窗口加载事件

调整窗口大小事件

定时器

定时器之setTimeout()

setTimeout()回调函数

清除定时器clearTimeout()

setInterval()定时器

清除定时器clearInterval()

2.JS执行机制

同步和异步

同步和异步执行机制

执行机制

location对象

location对象的方法

navigator对象

history对象

---

1.BOM概述

BOM的构成

window对象是浏览器的顶级对象

在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert() 、prompt()

window对象的常见事件

窗口加载事件

window.οnlοad=function(){}

window.addEventListener("load",function(){})

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

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

window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个为准，但是使用addEventListener就没有限制

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

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

如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用DOMCountentLoadded比较合适

调整窗口大小事件

window.οnresize=function(){}

window.addEventListener("resize",function(){})

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

只要窗口大小发生像素变化，就会触发这个事件，常利用这个事件完成响应式布局

注意格式的写法

先将整体放在大的页面中load，在接受数据，将其放进小的resize中，调用window.innerWidth来得到页面的大小 

定时器

定时器之setTimeout()

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

setTimeout方法用于设置一个定时器，该定时器再定时器到期后执行调用函数

window可以省略

这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名（）’三种形式（第三种不推荐）

延迟的毫秒数省略默认是0，若果写，必须是毫秒

注意三种形式的写法

直接写函数   setTimeout(function(){console.log('时间到了')},2000)

先定义函数，再调用    function callback(){}       var timer1=setTimeout(callback,3000)

setTimeout()回调函数

该调用函数也称为回调函数callback

这个函数需要等待时间，时间到了才去调用这个函数（我觉得和上面让内容消失是一样的，只不过这个是图片）

清除定时器clearTimeout()

window可以省略，括号里面的参数就是定时器的标识符（名字）

setInterval()定时器

window.setInterval(回调函数，[间隔的毫秒数])

setInterval()方法调用一个函数，每隔这个时间，就去调用一次函数

可以直接写函数，或者调用函数或者‘函数名（）’三种形式

间隔的毫秒数省略默认是0，如果写，必须是毫秒

倒计时案例

清除定时器clearInterval()

在给定时器命名的时候，注意全局变量和局部变量，先定义一个全局变量，等于null（否则返回值是undefined），之后再将定时器给变量，再清除定时器

发送短信案例

2.JS执行机制

同步和异步

JS的执行是单线程的，即一件事做完后再去做另一件事，页面渲染较慢

同步：前一个任务结束后再去执行后一个任务

异步：同时进行

同步和异步执行机制

同步任务都放置在一个执行栈中，将异步任务放置在任务队列中

先执行执行栈中的内容，再去处理任务列表中的内容，能大大节省时间

异步任务有三种：普通事件，click 、resize；资源加载，load 、error；定时器 ,setInterval、 setTimeout等

执行机制

事件循环

在执行任务时，将同步任务放在执行栈中，异步任务放在任务列表中，当执行栈中所有同步任务都执行完后，将任务列表中的任务放到执行栈中执行，执行完后，会回到任务列表中看看是否还有内容要执行，有的话会继续执行，执行过后又会返回来看

如果第一次回到任务列表中看时，触发了点击事件，那么还会再执行一下任务列表中的内容

location对象

location.href  获取或者设置整个URL

location.search   返回参数

location对象的方法

location.assign()   跟href一样，可以跳转页面，记录历史，可以跳转页面

location.replace()   替换当前页面，不记录历史，不能后退页面

location.reload()    重新加载页面，相当于刷新按钮或者f5，如果参数为true强制刷新ctrl+f5

navigator对象

用来判断用户使用电脑端还是手机端打开网页，实现跳转

history对象

history.forward()   实现前进功能

history.back()   实现后退功能

history.go(参数)   前进和后退功能都能实现，根据参数前进或后退