繁体   English   中英

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

[英]How can I defer a jQuery each loop

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

所以我想我可以使用下划线的_.defer()来排列每个循环中的函数,如:

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

$.each(assets, handleAsset);

然而,这会抛出一个奇怪的错误(堆栈跟踪指向$.each ):

Uncaught TypeError: Object 20877 has no method 'call'

这种做法有缺陷吗? 这是由于处理程序函数内部的异步操作吗? 还有另一种/更好的方法来实现这一目标吗?

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

但是,您真正需要做的是,设置异步失控计时器 ,为实现提供足够的空间来更新UI队列 (或UI线程 )。 这通常使用setTimeout() (client), 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队列

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

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() );

这里发生了什么?

我们基本上做的是:

  • 获取阵列并在100ms的时间范围内处理尽可能多的数据/条目
  • 之后,停止处理(调用setTimeout )并为UI提供更新的机会
  • 只要我们仍然在数组中有数据,那就这样做

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

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


快速演示:

那么你想限制并发异步操作的数量? 您的实施中的缺陷是您将推迟每个操作,直到上一个操作完成。

一种选择是使用序列帮助程序,然后可以将此队列分解为更易于管理的块以进行处理。

https://github.com/michiel/asynchelper-js/blob/master/lib/sequencer.js

var actions = [];
$.each(assets, function(key, value) {

    actions.push(function(callback) {
      $.ajax({
          url: 'process.php?id='+val,
          success: function(msg) {

            callback();
          }
        });
    });
  }
);

var sequencer = new Sequencer(actions);
sequencer.start();

如果将actions数组拆分为两个数组,并让它们并排运行,那么一次只能运行两个进程,直到两个队列都完成为止。

例如

var arr1 = actions.splice(0,100);
var arr2 = actions.splice(100,200);

var sequencer1 = new Sequencer(arr1);
sequencer1.start();

var sequencer2 = new Sequencer(arr2);
sequencer2.start();

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM