Ussy Diary

◆ [JavaScript]Array#each を疑似非同期にする

Array でループ全体の処理にそこそこコストがかかる場合、ループが終わるまでクライアントは固まったようになります。それでは親切でないので 1 回の処理が終わったらクライアントに一定時間操作を返してあげるコードを prototype.js 上で動くものを書いてみました。すでにありそうだけど気にしないことにします。

拡張コード

Object.extend(Array.prototype, {
  asyncEach: function(iterator, millseconds, callback) {
    var i = 0, length = this.length, self = this;
    callback = Object.isFunction(millseconds) ? millseconds : callback;
    millseconds = !Object.isFunction(millseconds) && millseconds || 50;
    (function() {
      if (i >= length) {
        return;
      }

      iterator(self[i++])
      if(i == length) {
         if (Object.isFunction(callback)) {
            callback(self);
         }
      } else {
         setTimeout(arguments.callee, millseconds);
      }
    })();
  }
});

使用例

[1, 2, 3, 4, 5, 6, 7, 8, 9].asyncEach(function(v) {
  console.log(v);
}, function(v) { console.log(v);});

実行結果

1
2
3
4
5
6
7
8
9
[1, 2, 3, 4, 5, 6, 7, 8, 9]

実行中に対象の Array インスタンスに対し挿入、削除が行われないことが前提になります。

うーん使えるかなあ。