Question

在下面的代码示例中，我有两个按钮可以执行以下操作：

1）单击按钮1执行while循环

2）单击按钮2执行一条日志语句

如果您单击按钮1，然后单击按钮2，则按钮1停止执行。

是否可以在发生其他操作时继续执行按钮1？

function buttonOneClick() {
  let i = 0;
  while (i < 1000) {
    console.log('index is ', i);
    i++;
  }
}

function buttonTwoClick() {
  console.log('button two clicked');
}

<button type="button" onclick="buttonOneClick()">Click Button One and Start Loop</button>
<button type="button" onclick="buttonTwoClick()">Click Button Two</button>

Answer 1

“ JavaScript多线程”解决方案：您可以使用Webworkers来解决问题。将要执行的代码放在网络工作者中，该代码在后台运行（根据定义）：

Web Workers是使Web内容在以下环境中运行脚本的简单方法背景线程。工作线程可以执行任务而无需干扰用户界面。此外，他们可以执行I / O 使用XMLHttpRequest（尽管responseXML和channel属性始终为null）。创建后，工作人员可以将消息发送到通过将消息发布到事件来创建代码的JavaScript代码该代码指定的处理程序（反之亦然）。

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

使用此解决方案，您可以连续执行功能，但仍可以访问其他功能。

请注意，这不是我的解决方案中的传统Webworker，而是内联Webworker 。

function buttonOneClick() {
  // create an inline webworker
  var blob = new Blob([
    document.querySelector('#worker1').textContent
  ], {
    type: "text/javascript"
  })

  // Note: window.webkitURL.createObjectURL() in Chrome 10+.
  var worker = new Worker(window.URL.createObjectURL(blob));
  worker.onmessage = function(e) {
    console.log("Received: " + e.data);
  }
  worker.postMessage("hello"); // Start the worker.
}

function buttonTwoClick() {
  console.log('button two clicked');
}

<button type="button" onclick="buttonOneClick()">Click Button One and Start Loop</button>
<button type="button" onclick="buttonTwoClick()">Click Button Two</button>

<script id="worker1" type="javascript/worker">
  // This script won't be parsed by JS engines because its type is javascript/worker.
  self.onmessage = function(e) {
    for (let i = 0; i < 1000; i++) {
      self.postMessage( 'message from worker ' + i)
    }
  };
// Rest of your worker code goes here.
</script>

要检查结果，请使用真实的控制台，然后向后滚动一些内容-您将找到buttonTwoClick() console.log()。

不过有一个便笺

请勿在摘要中按 Tidy （整洁），这会使工作人员感到困惑，因为它无法“理解”这是什么。

发生其他互动时，Javascript函数停止执行

1 个答案: