WebAPI(四) BOM；延时函数；JS执行机制(同步异步)；location对象；history对象；navigation对象-CSDN博客

本文链接：https://blog.csdn.net/qq_44285582/article/details/141981963

文章目录

BOM

BOM是浏览器对象模型，BOM包含DOM；
在这里插入图片描述
window对象是一个全局对象。像document，alert()等都是BOM的属性；
window对象下的属性和方法调用的时候可以省略window；

// document.querySelector() 等价于 window.document.querySelector()
console.log(document === window.document);  // true
// 方法也是挂在window对象上的
function fn () {
    console.log(11);
}
window.fn() //11

所有通过var定义在全局作用域的变量、函数都是window的属性和方法。
let const定义的变量没挂在window对象上。

1. 定时器-延时函数

回顾间歇函数定时器：setInterval
语法：setTimeout(回调函数，等待的毫秒数)
setTimeout()仅执行一次；

let timeId = setTimeout(function fn () {
    console.log('3S后被打印');
}, 3000)
// 清除延时函数，在递归函数部分会用到
clearTimeout(timeId)

延时函数：只执行一次
间歇函数：每隔一段时间执行一次

2. JS执行机制

首先看两组代码，判断输出结果：

console.log(111);
setTimeout(function () {
    console.log(222);
}, 3000)
console.log(333);

这组代码的打印顺序为：111 333 222

console.log(1);
setTimeout(function () {
    console.log(2);
}, 0)
console.log(3);

这组代码的打印顺序为：1 3 2

(1)、同步与异步

JS是单线程，一次只能做一件事；如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。因此出现了同步与异步。

同步任务：一下子可做完的任务。在主线程上执行，形成执行栈。
异步任务：耗费时间的任务。被添加到任务队列(消息队列)中。
- 普通事件：如 click，resize
- 资源加载：如load，error
- 定时器：包括setInterval，setTimeout

首先执行栈中的同步任务，执行完毕，会按次序读取任务队列中的异步任务。

(2)、事件循环

console.log(1);
document.addEventListener('click', function () {
    console.log(4);
})
console.log(2);
setTimeout(function () {
    console.log(3);
}, 3000);

这段代码的执行结果是1243或1234；

流程图：
在这里插入图片描述
首先，代码中的同步任务在执行栈中执行；异步任务交给异步API进行处理，这部分由浏览器负责，浏览器是多线程的，能够同时监听多个异步任务，看哪个异步任务满足执行条件，将满足执行条件的异步任务推入任务队列中，等待执行栈读取任务队列，执行事件。

比如监听点击事件，若点击事件触发，则将该异步任务推入任务队列中，延时函数等待的间隔事件达到3秒了，该异步任务也会推入任务队列中。

执行栈会不停的来任务队列中查看是否有可以执行的异步任务。有，则读入执行栈中执行。没有，则继续查看任务队列。

由于主线程不断的重复获得任务、执行任务、再获得任务、再执行任务，所有这种机制被称为事件循环(event loop)

3. location对象

location对象常用属性和方法有：

(1)、href属性获取完整的url地址

对href赋值时用于地址的跳转

console.log(location);
console.log(location.href);

在这里插入图片描述
案例：5S后跳转页面

<a href="https://www.baidu.cn">支付成功<span>0</span>秒后跳转</a>
<script>
let num = 5;
// 1. 获取元素
const span = document.querySelector('span')
span.innerHTML = `${num}`
let timeId = setInterval(function () {
    // 2. 声明倒计时变量
    num--;
    span.innerHTML = `${num}`
    // 3. 倒计时结束，停止计时，跳转
    if (num === 0) {
        clearInterval(timeId)
        location.href = 'https://www.baidu.cn'
    }
}, 1000)
</script>

(2)search属性获取地址中携带的参数

地址中携带的参数，即?后面的部分。

<form action="">
    account: <input type="text" name="account">
    pwd: <input type="password" name="pwd">
    <input type="submit">
</form>

在这里插入图片描述
提交之后：

(3) hash：获取地址中的#后边的部分

比如网易云音乐的网站中：
在这里插入图片描述

经常用于不刷新页面，显示不同的页面（Vue路由）

(3) reload：刷新当前页面，传入参数true表示强制刷新

reloadBtn.addEventListener('click', function () {
    // 刷新
    location.reload()
    // 强制刷新
    location.reload(true)
})

4. history对象

window对象给我们提供了一个history对象，与浏览器历史记录进行交互。
方法：

back()：后退功能
forward()：前进功能
go(参数)：参数是1，则前进1个页面；如果是-1，则后退一个页面、

5. navigation对象

可以判断是手机还是pc打开，从而切换相应的页面
在这里插入图片描述