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으로 전화하여 반환 값 에 값 (함수가 아님)을 전달합니다.

그러나 막연한 최신 브라우저에서는 moveThing을 전달할 수 있으므로 래퍼는 필요하지 않습니다. 당신이 당신의 현재 setTimeout 전화를 대체 할 수 setTimeout를 알려줍니다

setTimeout(moveThing, 100, currentPos); 

이 ... 그 첫 번째 매개 변수로 currentPos 전달이 100ms (정도)에 moveThing를 호출 할 수 있습니다.

Answer 2

당신이 이런 짓을하는 경우 :

setTimeout(moveThing(currentPos), 100); 

당신은 즉시이 효과적으로 같은 것을 호출 할 것 :

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

그래서 함수가 지연되지 않습니다, 그리고 수 결코 종료 , 호출 스택 한계에 도달하게됩니다.

---

당신이 이런 짓을하는 경우 :

다음

setTimeout(moveThing, 100); 

이 지연 될 것이지만, currentPos 변수가 함수에 지역이기 때문에이 작동하지 않을 수 있도록, 그것은, 함께 통과되지 것입니다 . 래퍼 함수마다 전달 포함되지 않습니다

---

하나의 옵션은 가까운 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>