JS-BOM，定时器

目录

窗口加载事件

调整窗口大小的事件  "resize"

三个弹框

获取浏览器的尺寸

history

location

open

close

 navigator      [navigator [ˈnævɪɡeɪtə(r)]  导航器]

定时器 (1)   setTimeout    时间到了,只调用一次函数,

定时器 (2)   setInterval    [set interval  设置间隔时间 ],   按时间间隔循环调用函数,重复执行;

---

Browser Object Model浏览器对象模型,  浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

它是JS的一个组成部分，主要是与浏览器相关的功能操作。

简单来说，就是window。

BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

包含的功能有： 弹框、获取浏览器的尺寸、获取计算后样式、文档对象、历史记录、地址栏、打开、关闭窗口、刷新浏览器、后退、前进、在浏览器中输入URL等。

---

窗口加载事件

---

调整窗口大小的事件  "resize"

---

三个弹框

window.alert 弹出警告框

window.confirm 弹出选择框 (选择框)

window.prompt 弹出输入框

浏览器规定“任何window的属性在使用的时候可以不写window.”

---

获取浏览器的尺寸

window.innerWidth        [ inner (ɪnə) 内部的]  

window.innerHeight

---

history

历史记录对象，通过它可以实现前进后退功能(页面左上角的 ← 和 →)

• history.forward()   前进
• history.back()   后退
• history.go(n)    跳转n次 ( n为正数 表示前进n次;   n为负数 表示后退 ;   n为零 表示刷新  )

---

location

地址栏对象，通过它可以实现页面的跳转；

一  、 location 地址栏的全部字符串内容

1.获取当前地址栏的内容   location.href

2.设置新地址      location.href = 'https://www.baidu.com' 跳转到百度；

3.location.assign(url) 跳转方法；   通过 url 新地址     location.assign('https://www.baidu.com') 跳转到百度

4. location.search 查询串部分   ？加查询串   location.search // ?a=1&b=2&c=3

5.location.reload()    重新加载当前页面 即刷新

二 、 location.hash 哈西部分

location.hash   // #ccc

三 、origin 源

location.origin    // https://www.baidu.com

四  、 port 端口

location.origin   // https://www.baidu.com

五、host 主机名  （域名+端口）  hostname： 域名

location.port // 无(url中如果不写，默认是80端口)

六 、 protocol 协议 

location.protocol    //  https:

---

 通过location跳转页面的三种方式：

url="https://"

•          location.assign(url)

•          location.href = url

•          location = url;

---

open

window.open(url); 用于打开一个新的页面。

close

window.close(); 用于关闭当前页面(不一定关得掉)

 navigator      [navigator [ˈnævɪɡeɪtə(r)]  导航器]

浏览器的相关信息

    navigator.userAgent  返回浏览器的版本信息; 声明了浏览器用于 HTTP 请求的用户代理头的值。

---

定时器 (1)   setTimeout    时间到了,只调用一次函数,

[set timeout  设置超时]

• setTimeout(函数,延迟时间)
• setTimeout(函数名,延迟时间), //把函数写到外边, 直接调用,但是不加括号的;
• setTimeout("函数名()",延迟时间) //把函数写到外面,直接调用 , 把函数名和() 引起来, //不推荐
• 通常定义一个变量来接受定时器, 好清除他;

clearTimeout()  作用 : 取消延时器的执行;

clearTimeout(延时器名)  

作用：一定时间之后 执行函数 ; 将代码推迟一定时间执行

参数：1.被执行的函数; 2.  延迟时间 (单位毫秒);

setTimeout(function() {
  console.log(1);
}, 3000)   // 效果：3秒之后，输出1

  <script>
      //方法一
      var timer1 = setTimeout(function () {
        console.log("三秒后显示出来");
      }, 3000);
      //方法二
      var timer2 = setTimeout(fn1, 4000);
      function fn1() {
        console.log("四秒后显示");
      }
      //方法三
      var timer3 = setTimeout("fn2()", 5000); //这种方法 函数名()必须引号引起来,
      function fn2() {
        console.log("五秒后显示");
      }

// 创建一个定时器，1000毫秒后执行，返回定时器的标示
var timerId = setTimeout(function () {
  console.log('Hello World');
}, 1000);

// 取消定时器的执行
clearTimeout(timerId);

---

定时器 (2)   setInterval    [set interval  设置间隔时间 ],   按时间间隔循环调用函数,重复执行;

setInterval (调用的函数,延迟时间)

clearInterval( )  取消定时器(关闭定时器);

clearInterval( 定时器名 )

作用：定时调用的函数;

参数：1.被执行的函数; 2. 间隔时间 (单位毫秒) ;

setInterval(function() {

console.log(1)},

 1000) //一秒后打印1;

//demo1;

        setTimeout(function() {

            console.log(1);

        }, 1000);

        console.log(2);

        // 结论：先输出2 ,1秒钟之后输出1

//demo2;

for (var i = 0; i < 10; i++) {

            setTimeout(function() {

                console.log(i);

            }, 1000);

        }   //结果 : 1s后 输出 10个10;

        1 声明变量i为0  判定  开启延时器 i++ 变为1

        2 判定  开启延时器 i++ 变为2

        3 判定  开启延时器 i++ 变为3

        4 判定  开启延时器 i++ 变为4

        5 判定  开启延时器 i++ 变为5

        6 判定  开启延时器 i++ 变为6

        7 判定  开启延时器 i++ 变为7

        8 判定  开启延时器 i++ 变为8

        9 判定  开启延时器 i++ 变为9

        10 判定  开启延时器 i++ 变为10

        判定失败 结束循环

        等待1秒

        输出i 而i此时已经变为10;所以输出10个10;

demo3:

for (var i = 0; i < 10; i++) {

            setTimeout(function() {

                console.log(i);

            }, 0);

        }  //结果 :间隔 0s ;直接输出10个10;

  第一次循环  i为0  判定 开启一个0毫秒的延时器 i++

        这个延时器可能会在for循环还没有执行完毕的情况下就已经到时间了 问题：执行谁呢？是继续往下执行循环？还是执行延时器中的代码呢？

        JS中的代码执行机制：JS中有两部分负责执行代码 1: 执行栈 ,2:任务队列

        当延时器的代码到时间之后 该执行延时器的第一个函数了 但如果此时 线程正在执行栈中在忙着 会将该函数放入任务队列中进行排队

        什么时候执行栈清空了 才会去任务队列中查看是否有任务

        所以这个延时器和定时器的第二个参数 并不是准确的执行时间 而是加入队列的时间

        所以JS中的时间其实并不是非常准确