javascript - 没有JQuery的JavaScript幻灯片

有人可以帮我这个忙。首先让我提出代码。

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！

最佳答案

with会立即增加，因为您没有设置对该函数的超时调用，而是将超时调用设置为该widthchange函数的返回值。将setTimeout(WidthChange(), 3000);替换为setTimeout(WidthChange, 3000)。
进行此操作时，请同时考虑执行以下操作：

presentWidth + 1 +"px";

您在这里同时做两件事：将int加在一起和连接字符串。只要明确要先执行的操作即可：

(presentWidth +1) +"px";

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

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

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