过度使用 window.setTimeout

Question

所以我有这个单页应用程序，每次用户执行诸如单击按钮之类的操作时都会进行大量计算。由于 javascript 不是线程化的，冗长的计算会阻塞 UI 更新并造成糟糕的用户体验：

$('update-btn').click() {
  updateDomWithAnimation();
  doLenghtyCalc();
}

在阅读了太多关于如何处理这个问题的文章之后，我发现用window.setTimeout 包装一些函数调用确实有帮助。因此，有了这些知识，我开始将它们包装起来，它似乎给浏览器带来了一些响应能力。

但是我的问题是，即使延迟仅为 0 或 1，超时语句过多也会产生不良副作用吗？从业务逻辑的角度来看，我确保只有独立的独立函数包含在 setTimeout 中。我想从技术角度进行检查。有没有 JS 大师可以分享一些见解？

P.S：我看过 Web Workers，但我的代码是使用 Jquery 构建的，并且严重依赖于 DOM 状态等，因此无法实现 Web Workers atm，这就是我使用超时的原因 非常感谢！

Answer 1

虽然从技术上讲，运行多次超时是可以的，但通常建议不要太多。

我们做的一件事是每个都有一个 timeout/setInterval，当它被触发时会运行一组可以随时添加或删除的函数。

///Somewhere
var runnableFunctions = []
var runningIntervalID = window.setInterval(function() { 
    runnableFunctions.forEach(function(func) {
        if(typeof func === 'function') {
            func.call(null);
        }
    }, 1);


/// Elsewhere
$(domElem).on(event, function() {
    runnableFucntions.push(function() {
        //Do something on interval
        // slice out this function if it only needs to run once.
    });
});

这只是一个肮脏的例子，但您知道可以将函数推入数组并让它们在单个超时/间隔内运行，而不是设置许多超时/间隔，然后记住稍后停止它们。