定时器与BOM和异步js中的的定时器有俩种 * wBOM是浏览器对象模型 * indow 是 JS 内置的一个对象, B

定时器

js中的的定时器有俩种
第一种
- setInrerval 每经过一段时间就执行一次

setInterval(() => {
      console.log("定时器执行了");
    }, 2000);

第二种
- setTimeout 经过多少时间执行（只执行一次）

setTimeout(() => {
   console.log("只能执行一次的定时器");
            
    }, 2000);

这俩种定时器的返回值都表示当前计时器页面中的第几个计时器
- 作用:
  - 能够利用返回值关闭这个定时器
    - 关闭语法1: clearInterval(要关闭的定时器的返回值)
    - 关闭语法2: clearTimeout(要关闭的定时器的返回值)

关于异步

js代码执行的顺序
- 先从上到下执行将同步任务都执行一遍
- 同步任务执行完毕以后，然后再执行异步任务
- 当代码中间出行异步任务，就把异步任务放到任务队列中，在同步代码都执行完毕以后再执行异步任务

BOM

wBOM是浏览器对象模型
indow 是 JS 内置的一个对象, BOM中的方法都可以利用 window 内部提供的一些东西解决

1. 获取浏览器的窗口尺寸 window.innerHeight与window.innerWidth

2. 浏览器的弹出框

浏览器的弹出框
- prompt 用户输入框
- alert 弹出框
- confirm 用户询问框会有一个返回值确定是true 取消是false 弹出框会中断程序运行

2. 浏览器的地址栏信息 location

location.href 专门存储浏览器地址栏内 url 地址的信息
- window.location.href = 'www.baidu.com'
location.reload 会重新加载页面, 相当于刷新
- 注意: 不要写在全局内, 否则浏览器会一直刷新
- window.location.reload()

3.浏览器的历史记录 history

window.history.back() 回退历史记录回到前一个页面
history.forward() 去到下一个历史记录里面
window.navigator 获取浏览器信息

4.浏览器的执行事件 onload

该事件会在页面所有资源加载完毕后执行
在浏览器中, 把 JS 写在 head 中, JS 在加载时 DOM 还没加载完, 可能会导致获取 DOM 时出现问题, 但是如果把代码放在 onload 事件中, 则不会出现问题
如果把 JS 写在 body 底部, 则写不写 onload 都一样

       window.onload = function () {
            console.log('页面已经加载完毕')
        }

5. 浏览器的 onscroll 事件

当浏览器的滚动条滚动时会触发该事件, 或者鼠标滚轮滚动时触发

            window.onscroll = function () {
                console.log('浏览器滚动了')
            }

浏览器的内容可以滚动, 那么我们就可以获取到浏览器滚动的距离
在滚动的时候浏览器不会动，动的是网页，所以滚动条的事件是docoumt
如何区分
- 谷歌火狐
  - 如果页面声明那么需要使用 documentElement
  - 否则使用 body
- IE (了解)
  - 如果没有声明那么使用两个都没问题
  - 如果声明了那么只能使用 documentElement
- Safari
  - 两个都不用, 使用一个单独的方法 window.pageYOffset

        // 获取纵向滚动的距离
       // var height= document.body.scrollTop
       
        window.onscroll = function () {
            console.log(document.body.scrollTop)
            console.log(document.documentElement.scrollTop)
        }   
        
        
         // 获取横向滚动的距离
           // var height= document.body.scrollLeft
              window.onscroll = function () {
                   onsole.log(document.body.scrollLeft)
                   console.log(document.documentElement.scrollLeft)
                 }

6.浏览器的本地存储 localStorage

```js
 /* 
    localStorage
        浏览器本地存储, 持久存储, 一旦存储永久存在
        只能存基础数据类型(一般为字符串), 不能存储复杂数据类型
        可以跨页面通讯
    */
     /*     增: window.localStorage.setItem('key', 'value')
      
            查: window.localStorage.getItem('key')
               返回值: 查询到返回对应的数据, 否则返回 null
      
            删: window.localStorage.removeItem('key')
          
           清空: window.localStorage.clear()
      
      
           以后在公司开发的时候, 建议只用删除, 目的是为了自己的操作不会影响同事的代码
    */

    // 增
    window.localStorage.setItem("name","王二妮")
    window.localStorage.setItem("age","18")
    
    //如果要存引用数据类型的话需要借助josn的方法来将他转化为josn字符串
        //JSON.stringify
    window.localStorage.setItem("arr",JSON.stringify([1,2,3,45,6]))
    window.localStorage.setItem("obj",JSON.stringify({height:"300px",width:"200px"}))
  


    //查找的话用到的是getItem
        //查不到返回null
   console.log( window.localStorage.getItem("name"));
   console.log( window.localStorage.getItem("age"));
    // 如果要将想要的引用数据查出来需要再使用josn方法 将josn字符串还原
    // JSON.parse()     能够将传入的 JSON 格式的字符串还原成原本的数据类型, 原本是数组就还原为数组, 原本是对象就还原为对象

   console.log(JSON.parse(window.localStorage.getItem("arr"))  );
   console.log(JSON.parse(window.localStorage.getItem("obj"))  );


  
    //删: ocalStorage.removeItem
    // 删除某一条
     window.localStorage.removeItem('name')
     console.log( window.localStorage.getItem("name")); //null 已经被删了

    // 清空
    //window.localStorage.clear()
```