JavaScript学习笔记(8)——BOM和定时器

---

前言

本节围绕BOM浏览器对象模型展开。

---

BOM

浏览器对象模型
BOM为我们提供了一组对象，通过这组对象可以完成对浏览器的各种操作
BOM对象：
  Window —— 代表浏览器窗口（全局对象）
  Navigator —— 浏览器的对象（可以用来识别浏览器）
  Location —— 浏览器的地址栏信息
  History —— 浏览器的历史记录（控制浏览器前进后退）
  Screen —— 屏幕的信息
BOM对象都是作为window对象的属性保存的，所以可以直接在JS中访问这些对象(需要小写)

Navigator

浏览器的对象（可以用来识别浏览器）
navigator.userAgent 返回一个用来描述浏览器信息的字符串

location

表示的是浏览器地址栏的信息
可以直接将location的值修改为一个新的地址，这样会使得网页发生跳转
location.assign() 跳转到一个新的地址
location.replace() 跳转到一个新的地址（无法通过回退按钮回退）
location.reload() 刷新页面，可以传递一个true来强制清缓存刷新
location.href 获取当前地址

History

浏览器的历史记录（控制浏览器前进后退）
history.back() 回退按钮
history.forward() 前进按钮
history.go() 里面参数传数字 正值：向前跳转，负值：向后跳转

定时器

通过定时器，可以使代码在指定时间后执行 -设置定时器的方式有两种：
1、setTimeout()
参数：
  1.回调函数（要执行的代码）
  2.间隔的时间（毫秒）
关闭定时器：clearTimeout()

const timer = setTimeout(()=>{
		alert("我是定时器中的代码")
}, 3000)
clearTimeout(timer)

2、setInterval()
每间隔一段时间代码就会执行一次
参数：
  回调函数（要执行的代码）
  间隔的时间（毫秒）
关闭定时器：clearInterval()

const numH1 = document.getElementById("num")
let num = 0
const timer = setInterval(() => {
	num++
	numH1.textContent = num
	if(num === 200){
		clearInterval(timer)
	}
}, 30)

事件循环

函数在每次执行时，都会产生一个执行环境
执行环境负责存储函数执行时产生的一切数据
函数的执行环境存储到了一个叫做调用栈的地方
  栈，是一种数据结构，特点：后进先出
调用栈（call stack）
调用栈负责存储函数的执行环境
当一个函数被调用时，它的执行环境会作为一个栈帧，插入到调用栈的栈顶，函数执行完毕其栈帧会自动从栈中弹出

消息队列
消息队列负责存储将要执行的函数
当我们触发一个事件时，其响应函数并不是直接就添加到调用栈中的，因为调用栈中有可能会存在一些还没有执行完的代码
事件触发后，JS引擎是将事件响应函数插入到消息队列中排队，当调用栈为空时再插入到栈顶

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

console.time("间隔")
setTimeout(function fn() {
	console.timeEnd("间隔")
	alert("哈哈")

	console.time("间隔")
	// 在setTimeout的回调函数的最后，在调用一个setTimeout
	setTimeout(fn, 3000)
}, 3000)

---

总结

本节学习了浏览器对象模型BOM，定时器和事件循环。

根据尚硅谷李立超老师2022年的JS视频整理而成。