javascript - 如何在 "background"/不卡住 UI 中运行 javascript 函数

Question

我已经完成了一个 HTML 表单，它在许多不同的选项卡中有很多问题(来自数据库)。然后用户给出这些问题的答案。每次用户更改选项卡时，我的 Javascript 都会创建一个保存。问题是每次更改选项卡时我都必须遍历所有问题，并且每次都会卡住表单大约 5 秒钟。

我一直在寻找如何在后台运行保存功能的答案。显然没有真正的方法可以在后台运行某些东西，许多人建议使用 setTimeout(); 例如这个 How to get a group of js function running in background

但是这些例子都没有解释或考虑到即使我使用像 setTimeout(saveFunction, 2000); 这样的东西也不能解决我的问题。在这种情况下，它只会延迟 2 秒。

有没有办法解决这个问题？

Answer 1

您可以使用 web workers .这里的一些较旧的答案说它们没有得到广泛支持(我猜他们在写这些答案时没有得到广泛支持)，但今天 they're supported by all major browsers .

要运行 Web Worker，您需要创建内置 Worker 类的实例。构造函数接受一个参数，它是包含要在后台运行的代码的 javascript 文件的 URI。例如:

let worker = new Worker("/path/to/script.js");

Web worker 遵循同源策略，因此如果您传递这样的路径，目标脚本必须与调用它的页面位于同一域中。

如果您不想为此创建一个新的 Javascript 文件，您还可以使用数据 URI:

let worker = new Worker(
    `data:text/javascript,
    //Enter Javascript code here
    `
);

由于同源策略，您不能从数据 URI 发送 AJAX 请求，因此如果您需要在 Web Worker 中发送 AJAX 请求，则必须使用单独的 Javascript 文件。

您指定的代码(在单独的文件或数据 URI 中)将在您调用 Worker 构造函数后立即运行。

不幸的是，网络 worker 既不能访问外部 Javascript 变量、函数或类，也不能访问 DOM，但是您可以使用 postMessage 方法和 onmessage 来解决这个问题 事件。在外部代码中，这些是 worker 对象的成员(上面示例中的 worker)，在 worker 内部，这些是全局上下文的成员(因此它们可以通过使用 this 或前面什么都没有的那种)。

postMessage 和 onmessage 都是双向工作的，所以当在外部代码中调用 worker.postMessage 时，onmessage 在 worker 中触发，当在 worker 中调用 postMessage 时，在外部代码中触发 worker.onmessage。

postMessage 接受一个参数，即您要传递的变量(但您可以通过传递一个数组来传递多个变量)。不幸的是，无法传递函数和 DOM 元素，当您尝试传递一个对象时，只会传递它的属性，而不是它的方法。

onmessage 接受一个参数，它是一个 MessageEvent 对象。 MessageEvent 对象有一个 data 属性，它包含使用 postMessage 的第一个参数发送的数据。

这是一个使用网络 worker 的例子。在这个例子中，我们有一个函数，functionThatTakesLongTime，它接受一个参数并根据该参数返回一个值，我们想使用网络 worker 来找到functionThatTakesLongTime(foo) 不卡住 UI，其中 foo 是外部代码中的某个变量。

let worker = new Worker(
    `data:text/javascript,
    function functionThatTakesLongTime(someArgument){
        //There are obviously faster ways to do this, I made this function slow on purpose just for the example.
        for(let i = 0; i < 1000000000; i++){
            someArgument++;
        }
        return someArgument;
    }
    onmessage = function(event){    //This will be called when worker.postMessage is called in the outside code.
        let foo = event.data;    //Get the argument that was passed from the outside code, in this case foo.
        let result = functionThatTakesLongTime(foo);    //Find the result. This will take long time but it doesn't matter since it's called in the worker.
        postMessage(result);    //Send the result to the outside code.
    };
    `
);

worker.onmessage = function(event){    //Get the result from the worker. This code will be called when postMessage is called in the worker.
    alert("The result is " + event.data);
}

worker.postMessage(foo);    //Send foo to the worker (here foo is just some variable that was defined somewhere previously).