0

これが私が
http://www.schillmania.com/content/projects/javascript-animation-1/demo/
からコピーしたコードの一部です。 非常に単純なJSアニメーション：

function doMove() {
  foo.style.left = parseInt(foo.style.left)+1+'px';
  setTimeout(doMove,20); 
}

これは正常に機能します。ただし、次のように変更すると、次のようになります。

function doMove() {
   for (var i=0; i<1000; i++) {
       setTimeout(function(){foo.style.left = parseInt(foo.style.left)+1+'px';},20*i);
   }
}

したがって、アニメーションはまったくありません。私の知る限り、setTimeoutが呼び出されるたびに、JSエンジンはこれらのイベントをキューにプッシュします。だから私はこれがうまくいかない理由を理解していません。

4

5 に答える 5

0

forループ行はセミコロンで終わります。ループしていません。あなたがそれを修正すればそれはうまくいくはずです。

于 2012-06-07T07:07:01.953 に答える
0

i「その時」の価値を維持するためにクロージャーで包みます

for (var i=0; i<1000; i++){
    (function(i){
        setTimeout(function(){
            foo.style.left = parseInt(foo.style.left)+1+'px';
        },20*i);
    }(i));
}
于 2012-06-07T06:39:15.313 に答える
0 
function doMove() {
  foo.style.left = parseInt(foo.style.left)+1+'px';
  setTimeout(doMove,20); 
}

コールバック関数はによって一度だけ実行されます。setTimeoutコールバック関数はそれ自体が関数であるため、上記のコードは機能します。したがって、再帰と呼ばれます。

于 2012-06-07T06:41:51.167 に答える
0 
function doMove() { for (var i=0; i<1000; i++)
setTimeout(function(){foo.style.left = parseInt(foo.style.left)+1+'px';},20*i); }

forループの後に、不要なセミコロンがあります。

于 2012-06-07T06:42:48.100 に答える
0

forループの後にセミコロンがあります。したがって、ループは1000回実行され、setTimeoutは1回実行されます。

// Runs for 1000 times
for (var i=0; i<1000; i++);

// Runs one time moving foo by 1px
setTimeout(function(){foo.style.left = parseInt(foo.style.left)+1+'px';},20*i);

適切なインデントの欠如:)

于 2012-06-07T06:43:56.290 に答える