javascript - 如何在负载很重的功能运行时更新我的​​ UI？

Question

我正在尝试做一个小项目，让您可以看到n-queen 谜题的各种解决方案。

我面临的最困难的问题之一是在负责寻找解决方案的功能正在运行时尝试更新电路板。事实上，当有人试图计算新的解决方案集时，我什至无法让看板消失，因为 UI 停止响应。

我专门尝试做的是创建和显示一个新板，其方式与我在计算结束时所做的相同，但这次是在循环中检查给定的集合是否包含解决方案。那将是我的服务文件中的 ln:8。

this.checkSolution = function(board) {

    //console.log("Checking if solution ", board, " is valid.");

    for (var i = 0; i < board.length; i++) {
      for (var j = i + 1; j < board.length; j++) {
        if (Math.abs(board[i] - board[j]) == Math.abs(i - j)) {
          return false;
        };
      };
    };

    //console.log("Solution valid...");
    return true;
};

文件的副本可以在这个 plunk 找到.

有没有办法解决这个问题，并在算法运行时实时更新显示当前解决方案？

该问题与我的类似，并没有任何实际帮助。 OP 只是询问人们想要使用 Workers 的真实案例，并且所选答案提供了指向该主题的一些教程的链接，尽管这些教程很有趣，但并没有帮助我解决问题。另一方面，我提出了一个确切的案例，以及一个工作示例，它提出了各种困难(至少对我而言)。该代码位于与我的模块之一链接的 Angular 服务内，并且不可能使其与线程一起工作。

Answer 1

您需要的是在单独的线程中运行重负载函数。一种方法是使用 HTML5 Web Workers。

这个想法是，繁重的计算部分单独运行，只向主线程发送消息，主线程监听这些消息并同时处理 UI。

在 W3Schools 上可以找到网络 worker 使用的简单示例。

这里有更强大的文档 MDN