setTimeout 不起作用[重复]答案

【问题标题】：setTimeout doesn't work [duplicate]setTimeout 不起作用[重复]
【发布时间】：2014-04-30 00:51:50
【问题描述】：

我用 display:none 制作了一个 id 为“about”的 div，我编写了这个脚本：

function showbox() {
    document.getElementById('about').style.display="block"
};

并将函数作为事件添加到另一个 div ：

<div class="button" onClick="slide();setTimeout(showbox(),3000)">About</div>

因此，当用户单击带有“按钮”类的 div 时，ID 为“about”的 div 将在 3 秒后出现，该代码适用于显示部分，但不会延迟任何内容！注意：函数 slide() 存在并且工作完美，它不会干扰任何东西，所以不要质疑它。

请告诉我有什么问题。谢谢。

【问题讨论】：

setTimeout(showbox,3000)
这里的括号setTimeout(showbox()... 立即调用函数。
你不应该像那样使用内联javascript。
我希望 3 秒计时器仅用于测试目的，因为让用户单击按钮而不在 3 秒前故意提供反馈的设计很糟糕。

标签： javascript css onclick

【解决方案1】：

// You are *calling* showbox() here -- not passing the function ref as a parameter.
// Use this instead.

<div class="button" onClick="slide();setTimeout(showbox,3000)">About</div>

【讨论】：

你为什么要使用这样的代码cmets？
它就是这样出来的——当我在真正的代码中留下这样的 cmets 时，我会继承下来，我要传回给某人。
那么你应该使用毕竟这是在HTML中;)
-1 用于提倡内联 JS 事件。有更好的解决方案，请教他们。

【解决方案2】：

更好的方法：关注点分离。内联 javascript 是不好的做法。我们只是一个事件监听器！

var element; //grab element however you want
element.addEventListener("click",function() {
    slide();
    setTimeout(showbox,3000);
},false);

正如其他人所说，您需要将函数 reference 传递给超时。让() 立即调用该函数。

【讨论】：

另一方面，并非所有浏览器都支持 addEventListener（与内联调用不同）。编辑：查看stackoverflow.com/questions/1695376/… 等主题
支持回IE9。对于 8 及以下，您使用attachEvent。您也可以使用element.onclick = function() { }，但只允许附加一个事件。
@vdavid 我确实将 JavaScript 教学作为我的日常工作之一。我不同意。永远不要使用内联 JS 事件。
@vdavid 如果您确实需要这种兼容性，那么最好使用 jQuery 或类似的东西。否则你会经常遇到这种事情。浏览器已被弃用，因此新代码不应迎合它们。
@NiettheDarkAbsol 你没听说过“关注点分离”吧？

【解决方案3】：

showbox 就是您所需要的。删除()。

【讨论】：