Question

我正在进行客户端模拟，它可以进行即时背景计算和视图刷新。但是，由于模拟始终是实时的，因此在强烈的用户输入和编辑期间，CPU最终会执行大量不必要的工作。

我想要实现的是一种杀死用户事件的整个序列的方法。

主应用程序中的预期用法：

var sequence =  new Sequence(heavyFunc1, heavyFunc2, updateDom);
document.addEventListener("click", sequence.stop)
sequence.run() //all the heavy computation runs until told to stop

网络工作者的预期用法：

var sequence =  new Sequence(heavyFunc1, heavyFunc2, self.postmessage);
self.onmessage = function(e) {
    if (e.data === 'stop') msg = sequence.stop;
    else msg = sequence.run(e.data); //resets and restarts
};

我环顾四周，可以想到以下工具和模式：

setTimout（fcn，0）|| setImmediate（fcn）shim ：在主脚本和worker中的序列中包含各个步骤setTimeout(fcn,0)，以便在序列结束之前处理新事件。

killFlag = false;
window.addEventListener('keypress', function() {killFlag = true});

//this exampe works only with setTimeout, fails with setImmediate lib
var interruptibleSequence = function(tasks) {
  var iterate = function() {
    if (killFlag || !tasks.length) return;
    tasks.shift()();
    if (tasks.length) window.setTimeout(iterate,0);
  };
  iterate();
};

此示例适用于setTimeout但使用setImmediate失败，其中keypress事件始终排在最后。

debounce ：这是典型的答案，似乎不适用于我的情况。延迟和批量处理用户输入将部分地降低处理强度，但代价是处理时间较长。

承诺：我已经在使用工作结果的承诺，并且可以在中断序列和处理新事件的步骤之间引入额外的承诺。我尝试过（并且失败了）使用旗帜检查或Promise.race。

使用 kill flag

killFlag = false;
window.addEventListener('keypress', function() {killFlag = true});

//does not work. promises get priority and event is only triggered last
var interruptibleSequence = function(tasks) {
  var seq = Promise.resolve();
    tasks.forEach(function(task){
      seq = seq.then(function() {
        if (killFlag) return;
        else task();
    });
  });
};

使用 Promise.race

var killTrigger;
var killPromise = new Promise(function(res,rej){killTrigger = rej});
window.addEventListener('keypress', killTrigger());

//does not work. promises get priority and event is only triggered last
var raceToFailure = function(tasks) { 
  var seq = Promise.resolve();
  tasks.forEach(function(task){
    seq = Promise.race([seq.then(task),killPromise]);
  });
};

问题在事件中杀死序列的推荐模式是什么？

Answer 1

简而言之： 致电堆栈＆gt;＆gt; 承诺＆gt;＆gt; Message Queue（events＆amp; setTimeout）

事实证明，这个问题制定得很糟糕，而且对特定用例来说太具体了。通常，对于立即返回的同步函数，将它们包装在promise序列中会将控制权移交给下一个函数，但仍然优先于消息队列中的事件，甚至是在创建Promise之前触发的事件。接受的答案并不总是有效。

在下面的代码段中，事件，承诺，同步调用最终在同步中执行，承诺，活动订单。（需要原生承诺）

因此，让事件中断繁重计算的唯一方法是使用setTimeout对重同步函数进行分级。

//prep
function log(m) {document.getElementsByTagName('pre')[0].innerHTML += m+'<br>'}
function syncDelay(ms) {
    for (var tgt=Date.now()+ms; Date.now()<tgt;) Math.random();
}

function async1() {syncDelay(100); log('1. async1')}
window.addEventListener('message', function(e){log(e.data)});
function syncPr1() {syncDelay(100); log('3. syncPromise1')}
function syncPr2() {syncDelay(100); log('4. syncPromise2')}
function syncPr3() {syncDelay(100); log('5. syncPromise3')}


//sequence
setTimeout(async1,0);
window.postMessage('2. events get done last', '*');

Promise.resolve()
.then(syncPr1)
.then(syncPr2)
.then(syncPr3)
.catch(function(e){console.log(e)});

log('6. sync items get executed before next promise call');

<pre></pre>

用于中断浏览器事件的繁重计算的模式

1 个答案: