即使在等待調用函數時，setTimeout也不會等待

昨天在CodeAcademy開始學習JavaScript，並決定我實際上可以編寫代碼。開玩笑。在網上瀏覽，發現有類似學習曲線的人，但沒有任何答案解決了我的問題。即使在等待調用函數時，setTimeout也不會等待

在HTML中我有4個div。 3從左邊距600px。 1的左邊距400px。

還有4個按鈕。當我按下一個按鈕時，我試圖讓對應的div在一秒鐘內向左滑動，直到剩下：400px。

我以前有divs跳（沒有采取幾乎看起來像滑動的步驟）到正確的位置，但已經打破了代碼。好像setTimeout沒有等待規定的時間。我做了一些在線調查，並認爲在setTimeout完成時，保證金已經持續下降到最終的安息地點。

<html> 
<head><title></title> 

<script type="text/javascript" language="javascript"> 
//<![CDATA[ 

var stopPositionVisible = 400; 
var stopPositionHiding = 200; 


function slideIn(xslide){ 
    slidingDivInNow = document.getElementById(xslide); 

    if (parseInt(slidingDivInNow.style.left) > stopPositionVisible) { 
     slidingDivInNow.style.left = parseInt(slidingDivInNow.style.left) - 2 + "px"; 
     console.log(slidinDivInNow.style.left); 
    } 

    setTimeout(slideIn(xslide), 20); 
} 


//]]> 
</script> 
</head> 
<body> 

<a id="div0link" href="#" onclick="slideIn('d1');">Home</a> 
<a id="div1link" href="#" onclick="slideIn('d2');">page1</a> 
<a id="div2link" href="#" onclick="slideIn('d3'); ">page2</a> 
<a id="div3link" href="#" onclick="slideIn('d4'); ">page3</a> 

<div id="d1" style="position:absolute; left:400px; top:50px; background:black; color:white; width:200px">horizontally sliding div</div> 
<div id="d2" style="position:absolute; left:600px; top:60px; background:blue; color:white; width:200px">horizontally sliding div</div> 
<div id="d3" style="position:absolute; left:600px; top:70px; background:red; color:white; width:200px">horizontally sliding div</div> 
<div id="d4" style="position:absolute; left:600px; top:80px; background:green; color:white; width:200px">horizontally sliding div</div> 

</body> 
</html>

謝謝你的任何見解。

來源

2011-12-24 james d.

20毫秒幾乎沒有時間。不確定你的意思是「保證金已經持續下降」;該保證金不會自行下滑，你告訴它何時以及如何。 – 2011-12-24 16:38:46

http://jsfiddle.net/mjaric/xRzXk/ – 2011-12-24 16:50:41

謝謝@mjaric - 這是我最喜歡的網站 – 2011-12-24 17:27:29

setTimeout(slideIn(xslide), 20);

。您沒有將slideIn函數傳遞給setTimeout，而是傳遞slideIn函數返回的值。你必須給一個函數傳遞給setTimeout，這意味着你會做這樣的事情：

setTimeout(slideIn, 20);

但是，這樣一來，你沒有得到的參數來傳遞。所以，你把它包裝在一個匿名函數是這樣的：

setTimeout(function(){ 
    slideIn(xslide); 
}, 20);

你也可以給該函數的名稱用於調試的目的是這樣的：基本上

setTimeout(function slideTimeout(){ 
    slideIn(xslide); 
}, 20);

，如果你的第一個參數運行typeof無論您傳遞給setTimeout還是setInterval，都應該返回'function'。你正在運行的將返回'undefined'，因爲你什麼都沒有返回。

來源

2011-12-24 16:54:05

將通話的功能容器

setTimeout(function() { slideIn(xslide); }, 20);

來源

2011-12-24 16:37:29 ZagNut

謝謝@ziesemer - 你們倆都給出了我在網上看到的最佳做法。當我做了什麼建議，我沒有看到任何成功。 slideIn函數似乎沒有再次調用自己，或者它不會將xslide變量傳遞迴自己。 – 2011-12-24 17:04:03

在http://unitedicecream.com/films/slide.html# – 2011-12-24 17:07:47

上發佈了示例：'console.log（slidinginDivInNow.style.left）;'將slidingDivInNow的拼寫更正，並且它在Chrome中起作用。你可能想要放一個'if（console！=='undefined'）{console.log（...）; }'或者其他東西，所以你可以在IE中測試你的代碼，等等... – ZagNut 2011-12-28 00:02:08

內的setTimeout你的函數調用被立即評估。你想這樣的事情，而不是，返回，將一旦超時時間要執行的功能：立即調用slideIn功能

setTimeout(function(){slideIn(xslide)}, 20);

來源

2011-12-24 16:38:16 ziesemer

即使在等待調用函數時，setTimeout也不會等待

回答

相關問題