Question

所以我有这个单页面应用程序，每次用户执行单击按钮的操作时都会执行大量计算。由于javascript是非线程的，因此冗长的calc会阻止UI更新并创建糟糕的用户体验：

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

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

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

P.S：我看过Web Workers，但我的代码是使用Jquery构建的，并且在很大程度上依赖于DOM状态等，因此实现web worker atm是不可能的，这就是我使用超时的原因非常感谢！

Answer 1

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

我们做的一件事就是让一个超时/ 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.
    });
});

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

过度使用window.setTimeout

1 个答案: