首页 > 其他分享 >window对象的常见属性、延迟函数、时间循环eventloop

window对象的常见属性、延迟函数、时间循环eventloop

时间：2024-05-31 10:30:26浏览次数：26  
标签：存储 浏览器 URL eventloop 对象 window localStorage 延迟

一、window 对象

JavaScript 中的全局对象，代表浏览器窗口或者浏览器标签页。它具有许多属性和方法，以下是其中一些常见的属性：

  1. window.document: 表示当前窗口或标签页的文档对象，可以用来操作和访问文档的内容。

  2. window.navigator: 包含有关浏览器的信息，如浏览器的名称、版本、用户代理等。

  3. window.location: 包含有关当前 URL 的信息，并且可以用于导航到其他 URL。

  4. window.history: 包含浏览器会话历史的信息，可以用于在历史记录中向前或向后导航。

  5. window.localStorage 和 window.sessionStorage: 提供了在浏览器中存储数据的能力，分别用于长期存储和会话期间存储。

  6. window.innerHeight 和 window.innerWidth: 表示当前窗口的视口的高度和宽度。

  7. window.outerHeight 和 window.outerWidth: 表示浏览器窗口的外部高度和宽度，包括边框和滚动条等。

  8. window.screen: 包含有关用户屏幕的信息，如屏幕的高度、宽度、颜色深度等。

二、延时函数

setTimeout

setTimeout 函数用于在指定的时间间隔之后执行一次特定的函数。其基本语法如下：

setTimeout(function, delay);
  • function 是要执行的函数或要执行的代码块。
  • delay 是延迟的毫秒数。
setTimeout(function() {
  console.log('这个函数将在 2 秒后执行');
}, 2000);

取消定时器

如果需要取消 setTimeout 创建的定时器，可以使用 clearTimeout 函数。clearTimeout 接受 setTimeout 返回的计时器标识作为参数，并取消相应的定时器。

三、js执行机制

JavaScript 是一门单线程语言，意味着它在任意时刻只能执行一个任务。这与多线程的语言不同，JavaScript 采用事件驱动的模型来处理异步操作，通过事件循环机制来管理和调度异步任务的执行。

console.log('1');
setTimeout(function() {
  console.log('2');
}, 0);
console.log('3');
//在这个示例中，console.log('1') 和 console.log('3') 是同步任务，setTimeout 回调函数是异步任务。按照 JavaScript 的执行机制，输出结果将会是：

3
2

四、时间循环eventloop

事件循环（Event Loop）是 JavaScript 运行时环境中用于处理异步操作的核心机制。在浏览器中，事件循环负责管理和调度异步任务，确保它们按照正确的顺序执行。下面是关于事件循环的一些基本概念：

事件循环的工作原理

  1. 任务队列：事件循环通过任务队列（Task Queue）来存储需要执行的任务。任务分为宏任务（macrotasks）和微任务（microtasks）两种类型。

  2. 宏任务和微任务：

    • 宏任务包括整体代码块、定时器事件、事件监听器等。
    • 微任务包括 Promise 回调、MutationObserver 回调等。

  3. 事件循环过程：

    • 事件循环从宏任务队列中取出一个任务执行，然后检查微任务队列，执行所有微任务。
    • 重复以上步骤直到所有队列都为空。

五、location对象

location 对象是 JavaScript 中表示当前 URL 的全局对象，它提供了访问当前页面 URL 相关信息的属性和方法。在浏览器环境中，location 对象通常用于获取和操作当前页面的 URL 信息。

下面是一些常用的 location 对象的属性和方法：

属性

  1. href：包含完整的 URL，可读写。（利用js的方法跳转页面）
  2. host：包含主机名和端口号，可读写。
  3. hostname：包含主机名，可读写。
  4. protocol：包含协议部分，如 "http:" 或 "https:"，可读写。
  5. pathname：包含 URL 路径部分，可读写。
  6. search：包含 URL 查询部分（即？后的参数），可读写。
  7. hash：包含 URL 中的 hash 部分（即#后的内容），可读写。

方法

  1. assign(url)：加载新的 URL 页面。
  2. reload()：重新加载当前页面，传入参数true表示强制刷新。
  3. replace(url)：用新的 URL 替换当前页面。

示例

以下是一些使用 location 对象的示例代码：

// 获取当前页面完整的 URL
console.log(location.href);

// 修改 URL 查询部分并加载新页面
location.search = '?page=1&limit=10';

// 通过 assign 方法加载新页面
location.assign('https://www.example.com');

// 重新加载当前页面
location.reload();

注意事项

  • 在浏览器环境中，对 location 对象的修改通常会导致浏览器地址栏中的 URL 发生相应变化，并可能会引起页面的重新加载或跳转。
  • location 对象的一些属性是可读写的，但改变这些属性的值会立即影响到当前页面的 URL，因此需要小心操作以避免意外行为。

六、navigator对象

navigator 对象是一个表示浏览器信息的全局对象，它提供了访问浏览器和设备相关信息的属性和方法。通过 navigator 对象，可以获取到浏览器的类型、版本、所在平台以及设备的一些能力信息。

属性

  1. userAgent：包含了浏览器发送服务器的 user-agent 头部的字符串表示。
  2. appVersion：返回浏览器的版本信息。
  3. platform：返回浏览器所在的操作系统平台。

方法

navigator 对象还包含一些方法，用于执行一些浏览器相关的操作，例如：

  1. getBattery()：返回一个 Promise，用于获取关于系统电池的信息。
  2. getUserMedia(constraints, successCallback, failureCallback)：用于请求使用用户媒体设备，如摄像头或麦克风。
  3. vibrate(pattern)：用于触发设备振动，pattern 参数是一个数组，表示振动的模式。

七、history对象

history 对象是 JavaScript 中表示浏览器历史记录的全局对象，它提供了访问和操作浏览器历史记录的方法。通过 history 对象，可以实现在用户浏览历史记录中向前或向后导航，以及管理浏览器历史记录的相关操作。

以下是一些常用的 history 对象的属性和方法：

方法

  1. back()：在浏览器历史记录中向后导航，相当于用户点击浏览器的后退按钮。
  2. forward()：在浏览器历史记录中向前导航，相当于用户点击浏览器的前进按钮。
  3. go(delta)：在浏览器历史记录中向前或向后导航指定的步数，delta 参数为负数表示向后导航，正数表示向前导航。
  4. pushState(state, title, url)：向浏览器历史记录栈中添加一个新的状态，并切换到新的状态，但并不触发页面刷新。
  5. replaceState(state, title, url)：使用新的状态替换当前的历史记录条目，但并不触发页面刷新。

属性

  1. length：返回当前会话历史中的条目数，即当前页面在历史记录中的位置。
  2. state：返回当前历史记录条目的状态对象，该状态对象是通过 pushState() 或 replaceState() 方法设置的。

示例

以下是一些使用 history 对象的示例代码：

// 向后导航
history.back();

// 向前导航
history.forward();

// 向前或向后导航指定步数
history.go(-2); // 向后导航两步
history.go(3); // 向前导航三步

// 添加新的状态到历史记录栈
history.pushState({ page: 1 }, "Page 1", "/page1");

// 替换当前的历史记录条目
history.replaceState({ page: 2 }, "Page 2", "/page2");

八、本地存储localstorage

localStorage 是 HTML5 提供的 Web Storage 技术中的一种，它允许将数据存储在浏览器中，以便在同一域上的页面之间共享。通过 localStorage，可以实现在浏览器中永久保存数据，直到用户清除浏览器缓存或手动删除这些数据。

特点

  • 数据存储在客户端，不会被发送到服务器，因此安全性较高。
  • 数据以键值对的形式存储，每个键值对的值都是字符串。
  • 支持存储大量数据（5MB 左右），但需注意存储过多数据可能会影响浏览器性能。
  • 数据在同一域名下的所有页面之间共享，即使是在关闭浏览器后重新打开，数据仍然保留。

基本用法

  1. 存储数据： 
    // 将数据存储到 localStorage 中
localStorage.setItem('username', 'exampleUser');

  2. 获取数据： 
    // 从 localStorage 中获取数据
const username = localStorage.getItem('username');
console.log(username); // 输出存储的用户名

  3. 删除数据： 
    // 从 localStorage 中删除指定的数据
localStorage.removeItem('username');

  4. 清空所有数据： 
    // 清空 localStorage 中的所有数据
localStorage.clear();

    本地存储只能存储字符串

九、本地存储处理复杂类型

当需要在 localStorage 中存储复杂类型（如对象、数组等）时，需要进行序列化和反序列化处理，以便将其转换为字符串存储，并在需要时将其从字符串解析回原始类型。常见的做法是使用 JSON 序列化和反序列化。

1. 序列化（将复杂类型转换为字符串）

使用 JSON.stringify() 方法将复杂类型转换为字符串，然后存储到 localStorage 中。

const complexObject = { key: 'value', nestedObject: { nestedKey: 'nestedValue' } };

// 序列化并存储到 localStorage 中
localStorage.setItem('complexObject', JSON.stringify(complexObject));

2. 反序列化（将字符串转换回复杂类型）

使用 JSON.parse() 方法将存储在 localStorage 中的字符串解析为原始的复杂类型。

// 从 localStorage 中获取字符串，并解析为原始对象
const storedData = localStorage.getItem('complexObject');
const parsedObject = JSON.parse(storedData);

console.log(parsedObject); // 输出解析后的复杂对象

注意事项

  1. 在使用 JSON.stringify() 和 JSON.parse() 时，确保对象的属性值不包含循环引用，否则可能会导致无限递归的序列化。
  2. 考虑到浏览器的存储容量限制，避免存储过大的复杂对象，以免影响性能和用户体验。
  3. 在从 localStorage 中获取数据时，要注意处理可能出现的空值或异常情况，以确保代码的稳定性。

标签：存储,浏览器,URL,eventloop,对象,window,localStorage,延迟
From： https://blog.csdn.net/qq_52265298/article/details/139272520

相关文章

  • Windows11 新机开荒（二）电脑简单设置
    本文承接上一篇新机开荒（一）上一篇文章地址：Windows11新机开荒（一）电脑第一次开机相关设置：-CSDN博客本文主要用于开机后的电脑设置，优化。面向人群初次使用电脑或者觉得自己电脑文件夹过于复杂想要优化的用户。操作系统：版本   Windows11家庭中文版版本   23......
  • Windows PowerShell
    WindowsPowerShell是微软发布的一种命令行外壳程序和脚本环境，使命令行用户和脚本编写者可以利用.NETFramework的强大功能。引入了许多非常有用的新概念，从而进一步扩展了在Windows命令提示符和WindowsScriptHost环境中获得的知识和创建的脚本。=========================......
  • Nginx 实战-01-nginx ubuntu(windows WSL2) 安装笔记
    前言大家好，我是老马。很高兴遇到你。我们为java开发者实现了java版本的nginxhttps://github.com/houbb/nginx4j如果你想知道servlet如何处理的，可以参考我的另一个项目：手写从零实现简易版tomcatminicat手写nginx系列如果你对nginx原理感兴趣，可以阅读：从零......
  • Windows下Qt使用dump定位崩溃位置（1）
    软件调试Windows下Qt使用dump定位崩溃位置（1）目录软件调试Windows下Qt使用dump定位崩溃位置（1）1、Qt崩溃定位方法2、什么是dump文件3、使用vs调试dmp4、下载Windows符号表5、下载Qt符号表6、主要代码7、源代码更多精彩内容......
  • 认识Windows操作系统
    开机启动项在Windows系统中，开机启动项通常通过如下配置：注册表启动目录注册表按住WIN+R打开运行，输入regedit打开注册表编辑器用户启动项：\HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Run系统启动项：\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Cu......
  • Windows 系统下使用 XCOPY 复制 文件夹
    Windows系统下使用XCOPY复制文件夹@echooffxcopy/E/C/I/F/G/H/R/K/O/X/Y/B\\192.168.88.84\c$\dataE:\datapause1：这里的/E/H/K/O/X/B代表完整复制（包括空文件夹、隐藏文件、文件属性、文件所有权和ACL信息、审核设置、也复制链接目标）2：这里的/C/I/G/R......
  • 在windows服务器上搭建FileZilla服务端
    最近接到个需求，需要搭建图片文件服务器给后端程序读取目录和操作图片这个需求分为几个步骤：1.扩展windwos虚拟机磁盘空间考虑到图片操作的便利性，这里选用windows系统做图片服务器，但是由于图片比较大，原有windows主机磁盘不够，所以第一步就是扩展windows虚拟机磁盘空间2.在windows......
  • SpringBoot直连SAP，IJ IDEA开发与Windows，linux部署
    一、sapjco引入1.1、sapjco介绍sapjco3.jar，连接SAP所需的jar包，linux与windows系统通用libsapjco3.so，linux系统下连接sap所需的动态链接库sapjeco3.dll，windows系统下连接sap所需的动态链接库我使用的版本为sapjco3.0.10<dependency><groupId>com.sap</groupId> <artif......
  • vm exsi 扩展windows虚拟机磁盘空间
    最近接到个需求，需要搭建图片服务器给后端程序读取目录和操作图片这个需求分为几个步骤：1.扩展windwos虚拟机磁盘空间考虑到图片操作的便利性，这里选用windows系统做图片服务器，但是由于图片比较大，原有windows主机磁盘不够，所以第一步就是扩展windows虚拟机磁盘空间2.在windows服务......
  • 在Windows命令提示符或PowerShell中，如果你想要同时执行多个dir /S指令而不等待前一个
    在Windows命令提示符或PowerShell中，如果你想要同时执行多个dir/S指令而不等待前一个指令完成，你可以使用以下方法：1.使用并行命令运行在命令提示符中，可以使用start命令以及/B选项来在后台启动一个新的命令窗口并执行指定的命令。这样可以使得dir/S命令在一个新的窗口中执行，而不......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99