2

有人可以帮我解决这个问题。首先让我把代码。

HTML：

<div id="FirstChild" style=" background-color: red; width: 100px; height: 50px; margin: 5px;"></div>

JavaScript：

 window.onload = someThing;

 function someThing(){
    window.onclick = WidthChange;
 }


function WidthChange(){ 
    var presentWidth = parseInt(document.getElementById("FirstChild").style.width);
    document.getElementById("FirstChild").style.width = presentWidth + 1 +"px";
    setTimeout(WidthChange(), 3000);
}

现在，当用户单击窗口时，我想在每 3 秒后将 div 的宽度增加 1 px。我希望这永远发生。但它不起作用。当我点击窗口时，宽度立即增加。我知道如何使用 jQuery animate() 来做到这一点，但我不想使用它。请只使用Javascript！

4

2 回答 2

2

with 立即增加，因为您没有设置对该函数的超时调用，而是设置对该 widthchange 函数的返回值的超时调用。替换setTimeout(WidthChange(), 3000);为setTimeout(WidthChange, 3000)。
当你在做的时候，也请考虑做一些事情：

presentWidth + 1 +"px";

您在这里同时做两件事：将整数相加和连接字符串。只要清楚你想先做什么：

(presentWidth +1) +"px";

或者只是将其分成两个语句。

最后：约定规定以大写字母开头的函数是构造函数，而不仅仅是函数/事件处理程序。所以也许也WidthChange改成widthChange？

更新和
之间的区别很简单。JS 将其视为一个表达式，需要将其解析为一个值（如数学中的断裂）。该表达式调用一个函数，因此可以将其解析为该函数调用的返回值。因此，该函数被立即调用，而不是在 3000 毫秒之后。 在没有括号的版本中，作为第一个参数传递给 setTimeout 的值是对函数的引用，无法进一步解析/简化。该函数将在超时到期后调用。如果您不清楚，只需谷歌（并将 MDN 加入书签）。setTimeout(WidthChange, 3000)setTimeout(WidthChange(), 3000)WidthChange()
setTimeoutsetTimeout MDN

于 2013-03-19T09:16:21.283 回答
0

在您的代码中-

  var presentWidth = parseInt(document.getElementById("FirstChild").style.width);

现在是时候 setTimeout -

setTimeout(function() { document.getElementById('FirstChild').style.width = (presentWidth+1)+"px" },
               3000);
于 2013-03-19T09:20:10.913 回答