javascript. Web工作者示例解释

5+

javascript. Web工作者示例

如果你’re here then you’一些JavaScript知识。 isn.’它?目前,我正在研究一系列 创造自己的可观察者。先前结束了 rxjs的崩溃课程。但我以为你应该在网络工作者身上。

好的,但是什么是网络工作者? ?

很久以前,当JavaScript介绍世界时。然后没有人关心性能。但经过近25年的时间,JavaScript在每天一次接受其他语言,流行。 JavaScript附带了许多专业功能,其中一个是Web工作者。

 javascript.  Web工作者示例解释
javascript. Web工作者示例解释

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

慢下来伴侣,我来答案。通常,Web工作者旨在让您在没有冻结页面的情况下运行大工作岗位。你曾经遇到过“页面无响应” pop up message?

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

您的屏幕将被卡住,直到未完成之前无法执行任何事件。好吧,让我向你展示你的小例子。

点击结果在上面的jsfiddle。它是给定两个数字之间的素数搜索器的一个例子。首先,点击 开始搜索 按钮。并尝试更改TextBox的数量,直到结果不显示在文本区域中。

你有没有经历过滞后?地狱啊!!!

这是这种问题的小例子。它赢了’t冻结您的页面,但体验这类问题的小块。

代码发生了什么?

当你体验时,你赢了’T可以单击,滚动或与任何内容进行互动。显然,可以使用Web工作者提高此页面。但在您到达之前,您需要仔细看看当前的JavaScript代码。现在,当您单击搜索按钮时,它会触发 dosearch() 功能 shown here:


简而言之,首先抓住页面的一些信息,然后它执行计算,然后它将结果插回a <div> so you can see them.

在第7行, findprimes() 是在给定两位数字之间找到素数的方法。

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

Web工作者让您在背景中进行任何耗时的工作。这个过程很简单:

  1. 您创建了一个Web工作者。
  2. 你告诉网络工作者该做什么。 (例如,缩回这些数字!)
  3. 你开始网络工作者。
  4. 当Web工作者完成时,它会告诉您,您的代码从那里开始。 (例如,在页面上显示结果。)

让 ’s dive in!

首先,你’ve创建Web工作者的对象,该对象运行名为primeworker.js的文件中的代码


工作者运行的代码始终存储在单独的JavaScript文件中。此设计使NewBie程序员写入Web工作者代码,该代码尝试使用全局变量或在页面上的直接访问元素。这些操作都不是可能的。

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

网页和Web工作者通过交换消息进行通信。要将数据发送给工人,您可以致电工人’s PostMessage() method:


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

同样,当您的工人需要谈到网页时,它会拨打自己的 PostMessage() 方法,以及一些数据,网页收到一个数据 onmessage. event.

笔记:   PostMessage() 函数只允许单个值。

但在这个例子中,我们需要两个元素(范围的两个数字)。解决方案是将这两个细节封装为对象文字。此代码显示一个示例,它给出了两个属性(第一个命名 ,第二个命名 ),并为它们两者分配值:


足够的谈话,现在我们会做真正的工作。


创建一个 primeworker.js. 下面给出了相同位置和代码的文件:


当工作人员来电 PostMessage(), 它射击了 onmessage. 事件,在网页中触发此函数的事件:


总的来说,代码的结构已经改变了一点,但逻辑大多是相同的。然而,结果是显着的。

你想在jsfiddle上看到一个例子吗?

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

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

本文尚未完成此处,请查看文章: 如何处理JavaScript Web工作者任务?

5+
概括
 javascript.  Web工作者示例解释
文章名
我正在努力创造自己的观察。之前结束了RXJS的崩溃课程。但我以为你应该在网络工作者身上。
描述
我正在努力创造自己的观察。之前结束了RXJS的崩溃课程。但我以为你应该在网络工作者身上。
作者
出版商名称
DAS JS.
出版商标志