Javascript 在action vuex中调用异步函数

我有一个巨大而缓慢的同步函数，我希望将它封装在异步使用它的承诺中。尽管此函数包含辅助操作，但在执行时不会卡住界面（避免用户的愤怒：D）

我所做的是以下内容（commons.js，单独的javascript文件）：

我在哪里叫它

Vuejs存储模块

import commons from '/path/to/commons'
export default {
  actions: {
    updateInterface: function() {
     //overlay on
     //some syncronous stuff...
      Q.fcall(function () {
        commons.myHugeFunction(params);
      }
     //some others syncronous stuff...
     //overlay off
    }
  }
}

尽管如此，它似乎工作得很好，但由于巨大的功能已经完成，我的整个前端都卡住了。我过去常常在执行之前和之后放置一个覆盖，但如果dom中有，我就看不到它（但这可能是另一个超出范围的问题…）

我想象它的执行就像是可以由一个单独的线程来处理的东西，所以用户在这段时间内可以做其他的事情

---

是因为“可能”应用程序完全位于前端（浏览器）？

如果myHugeFunction不使用任何仅在

窗口中可用的全局变量，则可以使用web worker进行此操作。例如，它不能与DOM交互。您需要将所有外部依赖项作为参数传递，或者在web worker上下文中包含这些依赖项

下面是它的样子：

将myHugeFunction从
commons.js
移到一个新的、单独的
worker.js
文件中，您不应该
导入该文件。您的
worker.js
文件应该如下所示：

function myHugeFunction(...params) {
   //lots...lots...lots..of synchronous things
   console.log('parameters', params);
   return 'myHugeFunction return value';
}

onmessage = function(e) {
    postMessage(myHugeFunction(...e.data));
}

在您的
commons.js
中，您可以定义这个助手函数
promiseWork
：

exports default {
    promiseWork: function(script, params) {
        return new Promise(function (resolve, reject) {
            var worker = new Worker(script);
            worker.onmessage = function(e) {
                resolve(e.data);
            }
            worker.onerror = function(e) {
                reject('[' + e.filename + ':' + e.lineno + '] ' + e.message);
            }
            worker.postMessage(params);
        });
    }
}

在Vuejs存储模块中，您可以使用脚本名称和参数（数组）作为参数调用
promiseWork
：

export default {
    actions: {
        updateInterface: function() {
            //overlay on
            //some synchronous stuff...
            promiseWork('worker.js', params).then(function () {
                console.log('huge work completed asynchronously');
                //some other stuff...
                //overlay off
            });
        }
    }
}

不管你把它放在哪里，如果你有一个巨大的同步函数阻止io，它会阻止io。修复函数本身。非常感谢您提供的有用答案！现在问题清楚了。这是与另一个团队共享的代码，veeeeeery为他的工作感到自豪：D，并且由于任何原因不能触摸（该代码），因此我们必须解决这个问题，这也可能吗？是或否也是一个很好的答案，只是想知道我们如何从现在开始：）
export default {
    actions: {
        updateInterface: function() {
            //overlay on
            //some synchronous stuff...
            promiseWork('worker.js', params).then(function () {
                console.log('huge work completed asynchronously');
                //some other stuff...
                //overlay off
            });
        }
    }
}