BOM 定时器JS执行机制

BOM即浏览器对象模型,它提供了独立于内容而与浏览器窗口交互的对象 , 其核心对象是window

由一系列对象构成 , 并且每个对象都提供了很多方法和属性

  • 把浏览器当成一个对象来看
  • BOM的顶级对象是window
  • BOM学习的是浏览器窗口交互的一些对象
  • BOM是浏览器厂商在各自浏览器上定义的 , 兼容性较差

BOM的构成

window对象是浏览器的顶级对象,具有双重角色

  1. 它是js访问浏览器的一个接口
  2. 它是一个全局对象 , 定义在全局作用域的变量 , 函数都会变成window对象的属性和方法

注意:特殊属性window . name

window对象的常见加载事件

窗口加载事件

window . onload 是窗口加载事件 , 当文档内容完全加载完成后会触发该事件(包括图像、CSS、文件),就调用的处理函数

注意:

有了window . onload就可以把JS写到页面元素的上方 , 因为 onload 是等页面内容全部加载完毕 ,再去执行处理函数

window . onload 传统注册事件方式只能写一个 , 如果有多个 , 会以最后一个window . load为准

如果使用addEventListener则没有限制

DOMContentLoaded事件

document.addEventListener('DOMContentLoaded',function(){})

DOMContentLoaded事件触发时 , 仅当DOM加载完成 , 不包括样式表 , 图片 , flash

调整窗口大小事件

window . onresize 是调整窗口大小加载事件 ,当触发时就调用的处理函数

注意:

只要窗口大小发生像素变化 , 就会触发这个事件

我们经常利用这个事件完成响应式布局 , window . innerWidth 当前屏幕的宽度

定时器

setTimeout()定时器

window . setTimeout ( 调用函数,[ 延迟的毫秒数 ] )

window . setTimeout()方法用于设置一个定时器 ,该定时器在定时器到期后执行调用函数

注意

  1. 这个window在调用的时候可以省略
  2. 延时时间单位是毫秒 但是可以省略  默认是0
  3. 这个调用函数可以直接写函数 , 还可以写函数名 , 或‘函数名()’
  4. 页面中可能有多个定时器 , 经常给定时器加标识符

里面的函数也称为回调函数callback

普通函数是按照代码顺序直接调用

而回调函数需要等待时间 , 时间到了才去调用这个函数 , 因此称为回调函数

停止setTimeout()定时器

window . clearTimeout(timeout ID)

注意:window可以省略 , 里面参数就是定时器的标识符

setInterval()定时器

window . setInterval(回调函数 , [ 间隔的毫秒数 ])

setInterval()方法重复调用一个函数 , 每隔这个时间 , 就去调用一次回调函数

注意

  1. 这个window在调用的时候可以省略
  2. 间隔毫秒数默认是0 , 如果写 , 必须是毫秒 , 表示每隔多少毫秒调用这个函数
  3. 这个调用函数可以直接写函数 , 还可以写函数名 , 或‘函数名()’
  4. 页面中可能有多个定时器 , 经常给定时器加标识符

停止setInterval()定时器

window . clearInterval()方法取消了先前通过调用setInterval()建立的定时器

注意:window可以省略 , 里面参数就是定时器的标识符 

this

this的指向在函数定义的时候是确定不了的 , 只有函数执行的时候才能确定this到底指向谁 ,一般情况下this的最终指向是那个调用它的对象

  1. 全局作用域,普通函数,定时器里面this都是指向window
  2. 事件发生this会指向调用函数的那个对象
  3. 构造函数中this指向的是实例对象,new创建的那个对象

JS执行机制

  1. 先执行执行栈中的同步任务
  2. 异步任务(回调函数)放入任务队列当中
  3. 一旦执行栈中同步任务执行完毕,按次序读取任务队列中的异步任务,被读取的异步任务结束等待状态,进入执行栈,开始执行

JS是单线程但现在允许创建多个任务

同步

前一个任务结束再执行下一个任务、程序的执行顺序与任务的排列顺序是一致的

同步任务

在主线程上执行 , 形成一个执行栈

异步

在做一件事的时候,因为这件事会处理很长时间,可以用这些时间处理其他事情

异步任务

一般来说 , 异步任务是通过回调函数来实现的

有三种类型:

  1. 普通事件:click、resize
  2. 资源加载:load、error
  3. 定时器:setInterval、setTimeout

异步任务相关回调函数添加到任务队列中(也称消息队列)

本质区别:各个流程的执行顺序不同

由于主线程不断重复获得任务,执行任务,再获取,再执行这种机制被称为事件循环

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论

打赏作者

c_perfectworld

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值