BOM重点核心：定时器、JS执行机制与location对象详解
BOM重点核心：定时器、JS执行机制与location对象详解
1. BOM概述
BOM的构成
window对象是浏览器的顶级对象。在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert()、prompt()等。
window对象的常见事件
窗口加载事件
window.onload = function(){};
window.addEventListener("load", function(){});
window.onload是窗口加载事件，当文档内容完全加载完成后会触发该事件（包括图像、脚本文件、CSS文件等），就会调用处理函数。
window.onload可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。
window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个为准，但是使用addEventListener就没有限制。
document.addEventListener('DOMContentLoaded', function(){});
DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表、图片、flash等等。
如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded比较合适。
调整窗口大小事件
window.onresize = 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(参数)：前进和后退功能都能实现，根据参数前进或后退