setTimeoutで再帰的に呼び出すためにラッパー関数が必要なのはなぜですか？

Question

現在、ループされた呼び出しで要素xピクセルの量を移動していくつかのものをテストします。私は再帰関数を作成し、オーバーフローからのコールバックを避けるためにいくつかの遅延を追加しました。私はこの遅延を作成するためにsetTimeoutを使用しました。 setTimeoutを使用するときに、なぜ再帰関数を別の関数の中にラップする必要があるのだろうかと思います。私がそうしなければ、遅延は追加されず、ブラウザはコールバックが私のコンソールでエラーを超えています。以下は私が使用しているコードです。 「物（ボール）」をdiv/box/screenを横切って左から右に何度も移動させることを意図しています。

（私はrequestAnimationFrameが一般的にこの種のものに使用されていることを理解していますが、私はさまざまな方法でjavascriptに慣れようとしています）。

function moveThing(pos){ 
    var currentPos = pos; 

    currentPos += 5; 

    theThing.style.left = currentPos + "px"; 

    if(Math.abs(currentPos) >= 900) { 
     currentPos = -500; 
    } 

    console.log(currentPos); 
    setTimeout(function(){moveThing(currentPos)}, 100); 

} 

moveThing(0); 

また、私が正しい用語を使用していない場合は、自由に修正してください。あなたの助けを前もってありがとう！

Answer 1

基本的に答えは：setTimeoutに関数を渡す必要があるためです。 setTimeout(moveThing(currentPos), 100)はmoveThingと呼び出し、戻り値（これは機能ではない）をsetTimeoutに渡します。

しかし、ぼんやりとした最新のブラウザでは、moveThing自体を渡すことができます。ラッパーは必要ありません。

setTimeout(moveThing, 100, currentPos); 

...その最初のパラメータとしてcurrentPosを渡すことは100ms（あるいはそう）でmoveThingを呼び出すためにsetTimeoutを伝えます：あなたはこれであなたの現在のsetTimeoutコールを置き換えることができます。

Answer 2

あなたはこれをしなかった場合：

setTimeout(moveThing(currentPos), 100); 

あなたはすぐにそれがこのように効果的に同じになり、それを呼び出すことがしたい：

var x = moveThing(currentPos); 
setTimeout(x, 100); 

ので、機能が遅延されることはありません、とすることができます決して終了、呼び出しスタックの制限に達します。

---

あなたはこれをしなかった場合：

その後

setTimeout(moveThing, 100); 

それが遅延するだろうが、currentPos変数は、関数にローカルであるため、それが動作しないように、それは、一緒に渡されませんでした。ラッパー関数を毎回渡し伴わない

---

1つのオプションは、近いcurrentPos変数の上にmoveThingを作ることであろう。関数は直接渡すことができ、常に同じvarにアクセスします。

function makeMover(pos, theThing) { 
 
    return function moveThing() { 
 
    pos += 5; 
 

 
    theThing.style.left = pos + "px"; 
 

 
    if (Math.abs(pos) >= 900) { 
 
     pos = -500; 
 
    } 
 

 
    console.log(theThing.id, pos); 
 
    setTimeout(moveThing, 100); 
 
    } 
 
} 
 

 
var mover = makeMover(0, document.querySelector("#theThing")); 
 
mover(); 
 

 
var mover2 = makeMover(0, document.querySelector("#theThing2")); 
 
setTimeout(mover2, 1000);

.thing { 
 
    position: relative; 
 
    width: 30px; 
 
    height: 30px; 
 
    background-color: orange; 
 
} 
 
#theThing2 { 
 
    background-color: blue; 
 
}

<div id=theThing class=thing></div> 
 
<div id=theThing2 class=thing></div>