setTimeout 函数挂起我的浏览器？答案

【问题标题】：setTimeout function hangs my browser?setTimeout 函数挂起我的浏览器？
【发布时间】：2011-02-24 20:26:31
【问题描述】：

我使用 java 脚本显示时间。

function showTime()
{
    setTimeout("showTime()", 500);      
    var now = new Date();
    var f_date = now.getDate()+" "+strMonth(now.getMonth())+" "+now.getFullYear()+" / "+timeFormat(now.getHours(), now.getMinutes());
    if (document.getElementById('foobar') == null)
    {
        showTime();
    }
    document.getElementById('foobar').innerHTML = f_date;

}

function strMonth(m)
{ ............ }

function timeFormat(curr_hour, curr_min)
{--------------}

showTime();

我的Browser 被吸，或者被无限绞死。这应该是什么原因？

没有 showClock() 只有 showTime().. 打字错误

【问题讨论】：

Browser 是否报告任何 JavaScript 错误？
我想我们需要看看“showClock()”是做什么的。
可能是 strMonth 或 timeFormat 对您的问题负责。你能展示一下这些函数的代码吗？
到目前为止很遗憾每一个答案都是错误的。

标签： javascript jquery datetime

【解决方案1】：

为此使用 setInterval。重复正是间隔的用途（与超时相反）。

例子：

//an edited showTime function for example
var showTime = function(){
    var now = new Date();
    document.getElementById('foobar').innerHTML = 
      now.toDateString()+" "+now.toTimeString();

};

//The interval
var myInterval = window.setInterval(showTime, 500);

另外：当你完成并想要停止间隔时，使用

window.clearInterval(myInterval);

注意每个 Pointy 和 Mozilla 文档 setInterval 可能有问题。

在“危险使用”部分下了解更多信息： https://developer.mozilla.org/en/window.setInterval

编辑：您的代码似乎在您未发布的功能之一中存在错误，这导致了您的挂断。我已经编辑了我的示例代码，只是演示了在没有任何特定格式的情况下更新时间间隔的用法，您可以在此处看到：http://jsfiddle.net/JVb2K/

【讨论】：

@Pointy：谢谢我看到很多人提到你不应该使用 setInterval 但我从来没有看到为什么。你让我在 mozilla 文档中查找它，为此我很感激。
您不需要函数包装器。只是：setInterval(showTime, 500);
@Šime Vidas 谢谢，我有大量匿名函数包装器的坏习惯，并且一直这样做。将编辑代码来解决这个问题。

【解决方案2】：

这应该有效：

function showTime() {    
    var now = new Date(),
        foo = document.getElementById('foobar');

    if ( foo != null ) {
        foo.innerHTML = now.getDate() + ' ' + strMonth( now.getMonth() ) + 
                ' ' + now.getFullYear() + ' / ' + 
                timeFormat( now.getHours(), now.getMinutes() ); 
        setTimeout(showTime, 500);
    }
}

showTime();

所以，只有当页面上有一个 foobar 元素时，你才设置它的内容并做超时。

【讨论】：

@alis 我建议你定义一个返回格式化日期字符串的专用函数，这样你就可以这样写：foo.innerHTML = formattedDate(now); 你可以使用这个 formattedDate 函数而不是 strMonth 和 timeFormat 函数。
谢谢。你节省了我的时间:)

【解决方案3】：

这里有一个递归循环。你的 showTime 函数调用它自己，它调用它自己，它调用它自己。等等

您需要重新排序您的代码。

【讨论】：

它实际上不是递归的；对“showTime()”的第一次调用将在第二次调用之前很久很久就退出了。
@Pointy - 没有任何迹象表明 showTime() 运行将退出。根据那里调用的其他方法的性能，它可以轻松运行超过 500 毫秒。
@Justin 好吧，这是真的，但这就是我要求查看“showClock()”的原因。也许“showClock()”正在调用“showTime()”......但是那里的代码肯定不会看起来像需要 1/2 秒才能运行的代码！
@Pointy - 我也有兴趣查看 strMonth() 和 timeFormat()。

【解决方案4】：

可能是因为你使用 setTimeout 太早了。试着把它放在函数的末尾...

【讨论】：

这几行代码似乎不太可能需要 500 毫秒才能执行......

【解决方案5】：

我的猜测是因为您正在注册超时以每 500 毫秒调用一次您的方法，这会重新注册该方法。换句话说，您每 500 毫秒递归调用一次您的方法。

您的方法可能会或可能不会在 500 毫秒内执行，因此浏览器实际上什么都不做，除了不断执行您的代码（这看起来很像挂起）。

我至少会将setTimeout() 调用移到 showTime() 方法的末尾，并将超时时间增加到 1000 毫秒或 2000 毫秒（因为无论如何您只显示时间到分钟，它也可以更高）。

【讨论】：

【解决方案6】：

您正在调用 showTime()，这会导致 500 毫秒的延迟并再次调用 showTime()，这会导致 500 毫秒的延迟并再次调用 showTime()...等等。由于它在没有结束条件的情况下一遍又一遍地调用它，因此它永远不会退出该循环并执行函数中的其余代码。

【讨论】：

【解决方案7】：

您的函数 showtime() 正在通过 settimeout() 调用自身并进行无限循环。 ;-) 尝试将 settimeout 调用放在不同的函数中。

【讨论】：

【解决方案8】：

我在您的代码中看到的主要问题是您将setTimeout 放在了错误的位置。调用函数时应该调用它。我能够在jsFiddle 中获得此代码的准系统实现，但代码如下：

函数显示时间（）{ var now = new Date(); var f_date = now.getDate() + " " + now.getMonth() + " " + now.getFullYear() + " / " + now.getHours() + ":" + now.getMinutes(); document.getElementById('foobar').innerHTML = f_date; } setTimeout("showTime()",1000);

这将在 1 秒后更新 foobar 元素。再次，请参阅jsFiddle。

【讨论】：

【解决方案9】：

function showTime()
{
    setTimeout("showTime()", 500);      
    var now = new Date();
    var f_date = now.getDate()+" "+strMonth(now.getMonth())+" "+now.getFullYear()+" / "+timeFormat(now.getHours(), now.getMinutes());
    if (document.getElementById('foobar') == null)
    {
        showTime();

我不知道这是要做什么，但如果您的文档中没有 'foobar' 元素，它将递归调用自身，直到 JavaScript 引擎耗尽堆栈空间。但是，此时您将创建大量超时，每个超时都会递归调用自身，从而创建更多超时等...

【讨论】：

【解决方案10】：

这是一个非常古老的话题，但对于仍在寻找的人来说.. 我被困在同一个地方 2 周，我用Ajax 解决了问题。我还是个菜鸟，但看看Ajax Chat 3.1（1号房间）

http://webscripts.softpedia.com/script/Chat-Scripts/Most-Simple-Ajax-Chat-Room-39054.html

这是一个可以编辑和实施的聊天示例。它不会挂起，对我来说非常好用。我希望这行得通！

【讨论】：

但这不是 OP 的问题