带有说明的Javascript Web 工人 示例

5+

的JavaScript Web 工人 示例

如果你’re here then you’掌握一些JavaScript知识。 Isn’是吗?目前,我正在研究 创建自己的Observable。并结束了 RxJS 速成课程。但我认为您应该成为网络工作者。

好的,但是什么是Web 工人 ? ?

很久以前,当Javascript引入世界时。然后,没人会在意性能。但是在将近25年之后,Javascript逐渐流行另一种语言,并在今天流行起来。 Java脚本 具有许多专业功能,其中之一就是网络工作者。

带有说明的Javascript Web  工人 示例
带有说明的Javascript Web 工人 示例

理解,但是我的问题是相同的。什么是网络工作者?

放慢伴侣,我来了。通常,Web工作人员旨在让您在不​​冻结页面的情况下运行大型任务。你有没有面对过“页面无响应” pop up message?

页面无响应
如果你 get this message. 的 n you can feel the pain of this pop-up.

您的屏幕将被卡住,在之前的工作尚未完成之前,无法执行任何事件。好吧,让我向您展示这个小例子。

单击上方JsFiddle中的结果。它是给定两个数字之间的质数搜索器的示例。首先,点击 开始搜寻 按钮。并尝试更改文本框的数量,直到结果未显示在文本区域中。

你有滞后感吗?地狱呀!

这是这类问题的一个小例子。赢了’冻结您的页面,但会遇到此类问题中的一小部分。

代码发生了什么?

经验丰富,您赢了’不能单击,滚动或与任何东西交互。显然,可以通过Web 工人 改进此页面。但是在开始之前,您需要仔细查看当前的JavaScript代码。现在,当您单击“搜索”按钮时,它会触发 doSearch () 这里显示的功能:


简而言之,首先,它从页面中获取一些信息,然后执行计算,然后将结果插入到 <div> 这样您就可以看到它们。

在第7行 findPrimes () 是一种查找给定两位数字之间的质数的方法。

好的,我有问题。但是我该如何实施网络工作者?

Web工作者可让您在后台执行任何耗时的工作。过程很简单:

  1. 您创建一个网络工作者。
  2. 您告诉网络工作者该做什么。 (例如,计算这些数字!)
  3. 您启动网络工作者。
  4. 当网络工作者完成后,它会告诉您,您的代码将从此处开始。 (例如,在页面上显示结果。)

让 ’s div e in!

首先,你’ve创建一个Web 工人 对象,该对象运行名为PrimeWorker.js的文件中的代码


工作人员运行的代码始终存储在单独的JavaScript文件中。此设计不鼓励新手程序员编写尝试使用全局变量或直接访问页面上的元素的Web 工人 代码。这些操作都不可行。

为什么?因为如果多个线程尝试同时操作相同的数据,可能会发生不好的事情。

网页和网络工作者通过交换消息进行通信。要将数据发送给工作人员,请致电该工作人员’s postMessage () 方法:


网络工作者在内部工作
网络工作者在内部工作

同样,当您的工作人员需要回访网页时,它会调用自己的网页 postMessage () 方法以及一些数据,网页就会收到一个 onMessage 事件。

注意:   postMessage () 函数仅允许一个值。

但是在此示例中,我们需要两个元素(范围为两个数字)。解决方案是将这两个详细信息打包到对象文字中。此代码显示了一个示例,该示例为对象提供了两个属性(第一个命名为 ,第二个命名 ),并为它们两者分配值:


聊够了,现在我们将做实际工作。


创建一个 PrimeWorker.js 文件位于相同的位置,代码如下:


当工人打电话时 postMessage (), 它发射 onMessage 事件,在网页中触发此功能:


总体而言,代码的结构有所变化,但逻辑基本相同。但是,结果却大不相同。

您是否想在JsFiddle上看到示例?

您可以向下滚动,在文本框中键入内容,然后从上一个搜索中选择列表中的数字。你有什么问题吗?然后,您可以在下面的评论部分中与我们查询。

等待…取消后台任务和进度信息该怎么办?

这篇文章到这里还没有结束,请检查一下文章: 如何处理Javascript Web 工人 任务?

5+
概要
带有说明的Javascript Web  工人 示例
文章名
我正在从事一系列创建自己的Observable的工作。并且先前结束了RxJS的速成课程。但我认为您应该成为网络工作者。
描述
我正在从事一系列创建自己的Observable的工作。并且先前结束了RxJS的速成课程。但我认为您应该成为网络工作者。
作者
发布者名称
达斯
出版商徽标