首页 > 其他分享 >Js Bom&定时器、事件循环

Js Bom&定时器、事件循环

时间:2024-11-06 15:19:20浏览次数:1  
标签:定时器 浏览器 indexOf sBrowser sUsrAg Js 537.36 Bom 执行

  • BOM:浏览器对象模型

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

  • BOM对象:

    • Window —— 代表浏览器窗口(全局对象)
    • Navigator —— 浏览器的对象(可以用来识别浏览器)
    • Location —— 浏览器的地址栏信息
    • History —— 浏览器的历史记录(控制浏览器前进后退)
    • Screen —— 屏幕的信息
  • BOM对象都是作为window对象的属性保存的,所以可以直接在JS中访问这些对象

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

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

image-20241106113617836

image-20241106113652605

					// 检测当前浏览器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)

标签:定时器,浏览器,indexOf,sBrowser,sUsrAg,Js,537.36,Bom,执行
From: https://www.cnblogs.com/Mickey-7/p/18530295

相关文章

  • jmeter 固定吞吐量定时器
    使用:模拟18000QPS查询 HitsPerSecondTPS:聚合报告:   Targetthroughput(insamplesperminute):目标吞吐量(单位分钟),即每分钟执行多少次(TPM)CalculateThroughputbasedon(计算吞吐量策略):1、Thisthreadonly:仅对当前线程,也就是每个线程相互是不干扰的,都......
  • js内存泄漏几种方式及如何避免、内存溢出
    https://blog.csdn.net/Judy_qiudie/article/details/82845692 一、什么是内存泄漏(memoryleak)?参考阮一峰老师博客:http://www.ruanyifeng.com/blog/2017/04/memory-leak.html不再用到的内存,没有及时释放,就叫做内存泄漏(memoryleak)。程序的运行需要内存。只要程序提出要求,操......
  • 双token无感刷新nodejs+vue3(保姆级教程)
    什么是双Token无感刷新?双Token无感刷新机制使用两个不同的token来管理用户的身份验证和会话。通常情况下,这两个token是:访问Token(AccessToken):用于访问受保护的资源,通常具有较短的有效期(如15分钟到1小时)。当用户进行API请求时,附带此token以证明其身份。刷......
  • Node.js-增强 API 安全性和性能优化
    ​......
  • node.js毕设中国传统文化服饰交流平台(程序+论文)
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于中国传统文化服饰交流平台的研究,现有研究主要集中在传统文化服饰的历史、艺术价值等方面,如在传统服饰的审美意蕴研究中,多是从单一的美学角度探讨其......
  • node.js毕设文物藏品管理系统(程序+论文)
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于文物藏品管理系统的研究,现有研究主要集中在藏品的数字化管理、RFID技术在藏品管理中的应用等方面。例如,一些研究关注了如何利用RFID技术实现藏品的......
  • node.js动漫论坛-计算机毕业设计源码09947
    摘 要随着移动互联网的飞速发展,智能手机和移动互联网已经成为人们日常生活中不可或缺的一部分。在这样的背景下,微信小程序应运而生,凭借其无需下载安装、即用即走的特点,迅速成为连接用户与服务的桥梁。动漫作为一种深受年轻人喜爱的文化形式,拥有庞大的粉丝群体和广阔的市场......
  • 关于注册登录注销的jsp实现
    这是效果图代码实现中的数据库建表连接,参考之前的博客,这里写几个关键点的实现方法这里是添加了点击事件,有两个好处其一是两个图标一直了都是按钮,ui更加美观一点、其二是可以在函数部分添加弹窗比如先弹出登录成功的窗口再提交表单,在期中考试中有地方会用到这里是判断输......
  • El表达式&jstl
    JSP是一种用于创建动态网页的Java技术。EL(表达式和JSTL是JSP中常用的扩展,用于简化页面开发和增强功能。JSPJSP允许开发者将Java代码嵌入到HTML页面中,以生成动态内容。JSP页面最终会被转换为Servlet并执行。基本语法:<%...%>:用于嵌入Java代码。<%=...%>:用......
  • # JSON字符串处理 ##
    JSON字符串处理jacksonJackson是一个用于处理JSON数据的Java库,它提供了将Java对象转换为JSON格式和将JSON格式转换为Java对象的功能。添加依赖:如果你使用Maven,可以在pom.xml中添加以下依赖:<dependency><groupId>com.fasterxml.jackson.core</groupId><artif......