javascript - 我怎样才能推迟每个循环的jQuery

Question

我在 jQuery 中执行“繁重”的 Canvas 操作，每个循环导致较慢的设备(IE 和 iPad)有时变得完全没有响应。

所以我想我可以使用下划线的 _.defer() 来对每个循环中的函数进行排队，例如:

function handleAsset = _.defer(function(){
//weightlifting goes here (partly async)
});

$.each(assets, handleAsset);

但这会引发一个奇怪的错误(堆栈跟踪指向 $.each):

Uncaught TypeError: Object 20877 has no method 'call'

这种方法有缺陷吗？这是由于处理函数内部正在进行异步操作吗？是否有另一种/更好的方法来实现这一目标？

Answer 1

这是有缺陷的。您应该尝试在可能的最低点解耦/分解 代码。我认为从长远来看，仅仅解耦循环的每次迭代不太可能就足够了。

但是，您真正需要做的是设置一个异步失控计时器，它为实现提供了足够的空间来更新UI 队列(或UI线程)。这通常是使用 setTimeout()(客户端)、nextTick (node.js) 或 setImmediate(即将推出)等方法完成的。

例如，假设我们有一个数组，我们想要处理每个条目

var data = new Array(10000).join( 'data-' ).split('-'); // create 10.000 entries

function process( elem ) {
    // assume heavy operations
    elem.charAt(1) + elem.charAt(2);
}

for(var i = 0, len = data.length; i < len; i++ ) {
    process( data[i] );
}

现在这段代码是一个经典的循环，遍历数组并处理它的数据。它还会消耗 100% 的 CPU 时间，因此会阻塞浏览器 UI 队列，只要处理所有条目(这基本上意味着，浏览器 UI 将卡住变得 react 迟钝)。

为了避免这种情况，我们可以创建一个这样的结构:

var data  = new Array(10000).join( 'data-' ).split('-'); // create 10.000 entries

function runAsync( data ) {
    var start = Date.now();

    do {
        process( data.shift() );
    } while( data.length && Date.now() - start > 100 );

    if( data.length ) {
        setTimeout( runAsync.bind( null, data ), 100 );
    }
}

runAsync( data.concat() );

这里发生了什么？

我们基本上做的是:

• 获取数组并在 100 毫秒
的时间范围内处理尽可能多的数据/条目
• 之后，停止处理(调用setTimeout)并给UI一个更新的机会
• 只要数组中还有数据就这样做

任何超过 100 毫秒 的延迟通常被人眼识别为“滞后”。下面的任何内容看起来都很流畅和漂亮(至少我们的眼睛会告诉我们)。 100 毫秒作为最大处理时间的限制是一个很好的值。我什至建议减少到 50 毫秒。

这里需要注意的是，整体处理时间会增加，但我认为处理时间更长并保持响应速度更好，而不是处理速度更快和非常糟糕的用户体验。

---

快速演示:

• classic iteration (move the red square around, will block)
• runaway script timer (move the red square around, will be possible)