Js Bom&定时器、事件循环

• BOM:浏览器对象模型

• BOM为我们提供了一组对象，通过这组对象可以完成对浏览器的各种操作

• BOM对象：

  • Window —— 代表浏览器窗口（全局对象）
  • Navigator —— 浏览器的对象（可以用来识别浏览器）
  • Location —— 浏览器的地址栏信息
  • History —— 浏览器的历史记录（控制浏览器前进后退）
  • Screen —— 屏幕的信息

• BOM对象都是作为window对象的属性保存的，所以可以直接在JS中访问这些对象

Navigator

Navigator —— 浏览器的对象（可以用来识别浏览器）,Navigator中存在大量的关于浏览器代理的相关信息。

每个窗口都有一个关联的Navigator，这是一个Navigator对象。创建Window对象后，Navigator被设置为在Window对象的相关领域中创建的新Navigator对象

					// 检测当前浏览器mdn示例代码
            let sBrowser
            const sUsrAg = navigator.userAgent

            // The order matters here, and this may report false positives for unlisted browsers.

            if (sUsrAg.indexOf("Firefox") > -1) {
                sBrowser = "Mozilla Firefox"
                // "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
            } else if (sUsrAg.indexOf("SamsungBrowser") > -1) {
                sBrowser = "Samsung Internet"
                // "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36
            } else if (
                sUsrAg.indexOf("Opera") > -1 ||
                sUsrAg.indexOf("OPR") > -1
            ) {
                sBrowser = "Opera"
                // "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106"
            } else if (sUsrAg.indexOf("Trident") > -1) {
                sBrowser = "Microsoft Internet Explorer"
                // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
            } else if (sUsrAg.indexOf("Edge") > -1) {
                sBrowser = "Microsoft Edge (Legacy)"
                // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
            } else if (sUsrAg.indexOf("Edg") > -1) {
                sBrowser = "Microsoft Edge (Chromium)"
                // Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.64
            } else if (sUsrAg.indexOf("Chrome") > -1) {
                sBrowser = "Google Chrome or Chromium"
                // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
            } else if (sUsrAg.indexOf("Safari") > -1) {
                sBrowser = "Apple Safari"
                // "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
            } else {
                sBrowser = "unknown"
            }

            alert(`You are using: ${sBrowser}`)

location

location 表示的是浏览器地址栏的信息

使用大全

    // 可以直接将location的值修改为一个新的地址，这样会使得网页发生跳转
    location = "https://www.baidu.com"

    // 跳转一个新地址
    location.assign("https://www.hao123.com")

    // 跳转一个新地址，无法通过回退按钮回退
    location.replace("https://www.4399.com")

    // 刷新页面，可以传递一个true来强制清缓存刷新
    location.reload()

    // 获取当前地址
    console.log(location.href)

history

    // 回退按钮
    history.back()

    // 前进按钮
    history.forward()

    // 当前窗口历史记录列表中的条目数量
    console.log(history.length)

    // 正数前进，负数后退
    history.go(-1)

定时器

通过定时器，可以使代码在指定时间后执行

  // 参数:回调函数(要执行的代码)，间隔时间(毫秒)
    // setTimeout 到时间只会执行一次，不会重复执行
    const timer = setTimeout(()=>{
        console.log("code")
    },3000)
    
    // 关闭定时器
    clearTimeout(timer)

    // 参数:回调函数(要执行的代码)，间隔时间(毫秒)
    // setInterval，每间隔指定时间都会执行一次，重复执行，直到关闭定时器
    const timer = setInterval(()=>{
        console.log("code")
    },3000)

    // 关闭定时器
    clearInterval(timer)

事件循环

事件循环（event loop）

• 函数在每次执行时，都会产生一个执行环境
• 执行环境负责存储函数执行时产生的一切数据
• 函数的执行环境存储到了一个叫做调用栈的地方

调用栈（call stack）

• 栈，是一种数据结构，特点 后进先出
• 调用栈负责存储函数的执行环境
• 当一个函数被调用时，它的执行环境会作为一个栈帧
• 插入到调用栈的栈顶，函数执行完毕其栈帧会自动从栈中弹出

消息队列

• 队列，是一种数据结构，特点 先进先出

• 消息队列负责存储将要执行的函数

• 当我们触发一个事件时，其响应函数并不是直接就添加到调用栈中的

• 因为调用栈中有可能会存在一些还没有执行完的代码

• 事件触发后，JS引擎是将事件响应函数插入到消息队列中排队

// 定时器的本质，就是在指定时间后将函数添加到消息队列中
// setInterval() 每间隔一段时间就将函数添加到消息队列中，但是如果函数执行的速度比较慢，它是无法确保每次执行的间隔都是一样的
// 如果希望每次执行都有相同的时间间隔，可以在setTimeout的回调函数的最后，再调用一个setTimeout


setTimeout(function task(){
    console.log("code")
    setTimeout(task,3000)
    
},3000)