如何处理浏览器中显示数据的重载处理

Question

上下文

• 我们有一个基于Ember的应用程序,可以处理大量的结构化数据(业务流程模型).
• 重要!我们真的希望尽可能让我们的应用程序脱机.

需要

虽然我们只需要显示这些数据,编辑它们等等,雷达中没有显示停止...

但现在,我们希望对这些模型应用处理:有效性检查,路径查找......以及几种时间/内存消耗算法.

问题

我们可以在服务器上处理算法,但这会杀死应用程序的离线模式.

我们已经考虑过网络工作者以避免在后台冻结应用程序和处理算法,但我们遇到了一个主要问题:将数据传递给工作人员时的数据重复.使用可转移对象会使应用程序在至少计算期间失去所有权(和数据),因此它似乎不可行.

你会如何处理这个问题？我们唯一的出路是使用算法的"类似协程"实现吗？任何线索？

Answer 1

如果您主要关心的不是在您开发的冗长 javascript 处理过程中冻结 UI，您可以将循环体重构为连续的步骤，这样每个步骤都可以使用window.setTimeout. 这种技术允许（单个）线程在每次交互之间处理 UI 事件：

var pr = function(x) {console.log(x)};
var COUNT=3;

// original regular javascript loop
for(var i=0; i<COUNT; i++) {
  var msg = "current index is (" + i + ")";
  pr(msg);
}

// step-by-step sequential calls
var body = function(i) {
  var msg = "non-blocking for: index is (" + i + ")";
  pr(msg);
}
nonBlockingFor(body, 4);

该函数nonBlockingFor调用第一个参数（作为函数）作为第二个参数传递的次数。它的定义如下：

// function constructor
var nonBlockingFor = (function() {
  function _run(context) {
    if(context.idx > context.max) return;
    context.fnc(context.idx++);
    window.setTimeout((function(){ _run(context)}), 1);
  }
  return (function _start(ufn, uqt, runId) {
    _run({idx: 0, max: uqt -1, fnc: ufn || (function(){}), runId: runId});
  });
})();

请注意，这是一个非常简化的函数，可以改进以处理其他多线程相关问题——即：等待线程完成（加入）。我希望这段代码对你有帮助。如果您喜欢这种解决问题的方法，请告诉我，如果您愿意，我可以花一些时间改进我的建议。