Question

昨天开始在CodeAcademy学习javascript并决定我实际上可以编写代码。开玩笑。在网上看了一下，找到了类似学习曲线的人，但没有一个答案解决了我的问题。

在HTML中我有4个div。 3个距离左边距600px。 1个生命距离左边缘400px。

还有4个按钮。当我按下一个按钮时，我试图让相应的div在一秒钟内向左滑动，直到剩下：400px。

我以前让div跳跃（没有采取看起来像滑动的小步骤）到正确的位置，但后来破坏了代码。似乎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>

感谢您的任何见解。

Answer 1

setTimeout(slideIn(xslide), 20);

立即调用slideIn函数。您没有将slideIn函数传递给setTimeout，而是传递slideIn函数返回的值。你必须将一个函数传递给setTimeout，这意味着你会做这样的事情：

setTimeout(slideIn, 20);

但是，这样，您无法传递参数。所以你把它包装在一个像这样的匿名函数中：

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

您还可以为函数命名，以便进行调试：

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

基本上，如果您对传递给typeof或setTimeout的任何内容的第一个参数运行setInterval，则应返回'function'。你正在运行的将返回'undefined'，因为你什么也没有返回。

Answer 2

将调用放入函数容器

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

Answer 3

正在立即评估setTimeout中的函数调用。你需要这样的东西来返回一个超时结束后将执行的函数：

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

即使等待调用函数，setTimeout也不会等待

3 个答案: