当前位置: 首页 > 编程笔记 >

JavaScript Web浏览器中的事件循环

陆洲
2023-03-14
本文向大家介绍JavaScript Web浏览器中的事件循环,包括了JavaScript Web浏览器中的事件循环的使用技巧和注意事项,需要的朋友参考一下

示例

绝大多数现代JavaScript环境都是根据事件循环工作的。这是计算机编程中的一个常见概念,从本质上讲意味着您的程序不断等待新事物发生,并且当新事物发生时对其做出反应。在主机环境调用到你的程序,在产卵事件循环,然后一个“转”或“嘀”或“任务”运行完成。当该回合结束时,主机环境会在发生所有其他事情之前等待其他事情发生。

一个简单的例子是在浏览器中。考虑以下示例:

<!DOCTYPE html>
<title>Event loop example</title>

<script>
console.log("this a script entry point");

document.body.onclick = () => {
  console.log("onclick");
};

setTimeout(() => {
  console.log("setTimeout callback log 1");
  console.log("setTimeout callback log 2");
}, 100);
</script>

在此示例中,主机环境是Web浏览器。

  1. HTML解析器将首先执行<script>。它将完成。

  2. 呼叫会setTimeout告知浏览器,在100毫秒后,它应将一个任务加入队列以执行给定的操作。

  3. 同时,事件循环然后负责不断检查是否还有其他事情要做:例如,渲染网页。

  4. 100毫秒后,如果事件循环由于其他原因不忙,它将看到setTimeout排队的任务,并运行该函数,并记录这两个语句。

  5. 在任何时候,如果有人单击身体,浏览器都会将一个任务发布到事件循环中以运行单击处理程序功能。事件循环不断地检查要执行的操作,因此可以看到并运行该功能。

您可以在此示例中看到事件循环调用JavaScript代码的几种不同类型的入口点的方式:

  • 该<script>元素被立即调用

  • 该setTimeout任务发布到事件循环和运行一次

  • 点击处理程序任务可以多次发布并每次运行

事件循环的每一轮都负责很多事情。其中只有一部分会调用这些JavaScript任务。有关详细信息,请参见HTML规范。

最后一件事:说每个事件循环任务“运行到完成”是什么意思?我们的意思是,通常不可能中断排队作为任务运行的代码块,并且永远不可能运行与另一代码块交错的代码。例如,即使您单击了完美的时间,也永远无法获得以上代码"onclick"在两个setTimeout callback log 1/2"s之间登录。这是由于任务发布的工作方式所致。它是合作的且基于队列的,而不是抢占式的。

 类似资料:
  • 本文向大家介绍浏览器事件循环与vue nextTicket的实现,包括了浏览器事件循环与vue nextTicket的实现的使用技巧和注意事项,需要的朋友参考一下 同步:就是在执行栈中(主线程)执行的代码 异步:就是在异步队列(macroTask、microTask)中的代码 简单理解区别就是:异步是需要延迟执行的代码 线程和进程 进程:进程是应用程序的执行实例,每一个进程都是由私有的虚拟地址空间

  • 事件 是某事发生的信号。所有的 DOM 节点都生成这样的信号(但事件不仅限于 DOM)。 这是最有用的 DOM 事件的列表,你可以浏览一下: 鼠标事件: click —— 当鼠标点击一个元素时(触摸屏设备会在点击时生成)。 contextmenu —— 当鼠标右键点击一个元素时。 mouseover / mouseout —— 当鼠标指针移入/离开一个元素时。 mousedown / mouseu

  • 浏览器都干了什么 用浏览器打开https://www.lcsays.com/,在网页空白处点右键选“显示网页源代码”,如下: 这才是网页的真正内容——一堆标签。浏览器向www.lcsays.com的网站服务器发送请求后,由网站服务器把这一堆标签发回给浏览器,浏览器就是根据这一堆标签的指令“渲染”成漂亮的页面的。 让我们换个视角重新看一遍这个过程。以google chrome浏览器为例,打开浏览器,

  • 问题内容: 我想在加载图像后创建一个警报框,但是如果将图像保存在浏览器缓存中,则不会触发该事件。 无论图像是否已缓存,如何在加载图像时触发警报? 问题答案: 动态生成图像时,请在之前设置属性。 在最新的Firefox和Chrome版本上进行了测试。 您还可以使用答案在这个岗位,我适合一次性动态生成的图像:

  • 问题内容: 我们一直在寻找答案,但是还没有找到解决方案。 我们有一个Web服务器,允许用户下载动态生成的文件(pdf),并通过servlet提供服务。我们想知道下载何时完成(以及如何:成功,失败,用户取消了吗?)。 没有用户输入,有没有办法知道这一点?这些文件相对较小,因此不需要进度条功能,但是我们需要某种“挂勾”功能,可以在下载完成后向您报告。这可能吗? [edit]浏览器端将具有什么功能来检测

  • 我想捕获浏览器窗口/选项卡关闭事件。我尝试了以下方法,但不起作用: 尝试了这些链接,但没有更多的成功。 JavaScript检查浏览器窗口何时关闭 如何捕获浏览器窗口关闭事件? javascript检测浏览器关闭标签/关闭浏览器 尝试检测浏览器关闭事件 问题: 我只想检测浏览器关闭事件,并在不向用户显示提示的情况下对此进行一些处理。 我尝试过很多方法,通过jQuery或JavaScript检测浏览