0

重複の可能性:
ループ内の Javascript クロージャー - 簡単な実用例

簡単な質問があります。私は HTML5 キャンバス要素を使用しており、キャンバスに一連のボックスを描画するループがあります。このコードは正常に動作します:

for (var i = 0; i < this.boxes.length; i++) {
    this.drawBox(canvas, this.boxes[i]);
}

ここで、ボックス描画ループにわずかな遅延を追加したかったので、ループを次のように変更しました。

for (var i = 0; i < this.boxes.length; i++) {
     var me = this;
     var xcanvas = canvas;
     var box = this.boxes[i];
     var func = function () {
         me.drawBox(xcanvas, box);
     };
     window.setTimeout(func, i * 50);
  }

2 番目のループは、this.boxes 配列から 1 つのボックスのみを描画します (配列には 1 ～ 16 個のボックスを含めることができます)。他のすべてのコードは、ソース内で同一です。どうすればいいの？

** 詳細な変数宣言は、参照のトラブルシューティングに使用されました **

どんな助けでも大歓迎です。

4

1 に答える 1

0

私はあなたの問題に対する正確な答えを知りませんが、同様のケースで私がしたことは、50ミリ秒のsetIntervalを実行し、その間隔関数でclearIntervalとsetIntervalを50 *i...でもう一度実行することでした。

var initialDelay = 50;
var counter = 0;
var intervalID;

intervalID = setInterval(myFunction(initialDelay), initialDelay);

myFunction(delay) {
     if (counter >= this.boxes.length) {
         clearInterval(intervalID);             
         //Clear interval and do nothing
     }
     clearInterval(intervalID);
     me.drawBox(xcanvas, box); //Do the stuff you want to do in your interval
     intervalID = setInterval(myFunction(delay * 50), initialDelay);
}

setIntervalは、基本的にループのように機能します。

于 2012-06-20T02:43:08.060 に答える