JS-09（定时器,异步,BOM)
定时器
setInterval
- 语法： setInterval（函数,数字）
- 函数：每次定时器重新执行的时候，要做的事情（执行的代码）
- 数字：当前定时器每个多长时间重新执行一次，单位是毫秒
setTimeout
- 语法：setTimeout（函数，数字）
- 函数：每次定时器重新执行的时候，要做的事情（执行的代码）
- 数字：当前倒计时器延长多长时间执行，单位是毫秒
注意：第二个参数，毫秒，最快的执行速度一般为4~20毫秒，与电脑性能有关。所以在书写定时器或倒计时的之后，需要我们知道一个世纪，一般不要不写或者给0毫秒。
定时器的返回值
-
意义：
- 表明当前定时器是这个页面的第几个定时器
-
作用：
- 能够利用返回值关闭这个定时器
-
关闭语法1：
- clearInterval（要关闭的定时器 的返回值）
-
关闭语法2：
- clearTimeout（要关闭的定时器的返回值）
-
注意：关闭语法可以混用，所以只要关闭定时器随便写上边那个都可以，但是推荐对应的书写，目的是为了让别人看出关闭的是定时器还是倒计时器。
-
查看定时器的返回值
-
利用返回值停止定时器
JS的异步任务
为了解决有的代码需要执行很久，后面的代码需要等它执行完才能执行的问题。所以JS将代码分为两个任务
-
同步任务
- 目前所接触到的内容中，除了定时器之外的都是同步任务。
-
异步任务
- 目前接触的只有定时器为异步任务，将来还有新的异步任务。
JS中代码执行的顺序，代码从上往下执行，先将代码中所有的同步任务, 全都执行一遍，同步任务执行完毕后, 再执行异步任务。如果在代码的中间遇到了异步任务, 那么先将异步任务暂存到一个任务队列中, 等待所有的同步任务执行完毕后执行。
BOM
浏览器对象模型
BOM其实就是浏览器提供给我们操作浏览器的一个能力，
- 获取浏览器的宽高
- 获取浏览器页面卷去的高度
- 通过JS控制页面的跳转
- 获取浏览器地址栏的信息
- 操作浏览器页面的滚动条
- 获取浏览器的版本
- 打开浏览器的弹窗
核心：
-
页面有一个对象叫做 window
- window是JS内置的一个对象，上述多有的方法都可以利用windo内部提供的一些东西解决。
获取浏览器的窗口尺寸（宽高）
- 注意：当前方法是包含浏览器的滚动条的
- console.log（window.innerWidth）
- console.log（window.innerHeight）高度
打开浏览器提供的弹出框
- prompt：用户输入框，会有一个返回值，就是用户输入的内容，永远是字符串格式。
- alert（弹出框）
- confirm（用户询问框）会有一个返回值，如果点确定返回true，否则返回false，弹出框会中断（暂停）程序的运行，直到关闭弹出框
浏览器的地址信息
-
在window对象中有一个对象location，他的内部存储的就是浏览器地址的信息
-
location.href
- 专门存储浏览器地址栏内url地址的信息
- 语法：var url = window.location.href
- window.location.href = 'www.baidu.com'
-
location.reload
- location.reload 会重新加载页面，相当于刷新。注意：不要写在全局内，否则浏览器会一直刷新
- window.location.reload（）
浏览器的历史记录
-
window中有一个对象叫做 history 它专门用来存储历史记录信息
-
history.back
- 就是回到前一个页面，相当于浏览器左上角向左的按钮，
- window.history.back（）
-
history.forward
- 就是去到下一个页面，相当于浏览器左上角向右的按钮
- window.history.forward
-
window.navigator
- 浏览器的版本信息
浏览器的事件
-
浏览器延迟加载事件
- window.onload = function （） { console.log（） }
-
浏览器的滚动事件
- window.onscroll = function （） { console.log（当前函数也不需要调用，会在浏览器阿生滚动事件的时候执行） }
浏览器的滚动距离
-
注意：滚动事件发生的时候，浏览器的位置一致没变，而是浏览器内的页面发生了滚动
-
document.body.scrollTop
-
document.documentElement.scrollTop
-
运用：
- 区分：谷歌 火狐 ，如果页面声明 那么去要documentElement否则使用body
本地存储：localStorage
-
把一些常用的信息存储在 用户的电脑本地(存储在浏览器中)localStorage。浏览器的本地存储, 持久化存储, 存储之后不手动删除, 那么永远存在，在存储的时候, 只能存储基本数据类型中的字符串，如果需要存储其他数据类型, 需要借助 JSON 提供的方法，可以实现跨页面通讯
-
增：window.localStorage.setTem（’xxx‘， ’xxx‘）
-
查：window.localStorage.getTem（’key’）返回值：查询到返回对应的数据，否则返回null
-
删：window.localStorage.removeItem（’key‘）
-
清空：window.localStorage.clear（）
