JavaScript 中的设置超时答案

【问题标题】：set time out in JavaScriptJavaScript 中的设置超时
【发布时间】：2011-04-13 15:23:20
【问题描述】：

Firefox 总是加载动态图像，但 IE 只显示图像而没有任何动态动作。我需要做什么改变？

来自IE查看源代码的JavaScript代码：

<script type=”text/javascript”
    <!--/*--><![CDATA[/*><!--*/ 
    if (document.getElementById("safeForm1d3").submitted.value == "false") { 
      document.getElementById("safeForm1d3").submitted.value = "true"; 
      setTimeout('document.getElementById("safeForm1d3").submit()', 100); 
    }else{ 
    document.getElementById("toHide").style.display="none"; 
    }/*-->]]>*/
</script>

我使用的是 Wicket 框架，所以真正的 java 代码是：

 static private class SafeSubmitBehaviour extends AbstractBehavior{
    public void onRendered( Component component ) {
      super.onRendered( component );      
      StringBuffer buffer = new StringBuffer(200);
      buffer.append("<script type=\"text/javascript\" ><!--/*--><![CDATA[/*><!--*/\n");
      buffer.append("if (document.getElementById(\"").append(component.getMarkupId()).append("\").submitted.value == \"false\") {\n");
      buffer.append("document.getElementById(\"").append(component.getMarkupId()).append("\").submitted.value = \"true\";\n");
      buffer.append("setTimeout('document.getElementById(\"").append(component.getMarkupId()).append("\").submit()', 100);\n}else{\n");
      buffer.append("document.getElementById(\"toHide\").style.display=\"none\";\n}/*-->]]>*/</script>");      
      component.getResponse().write(buffer);
    }  
  }

加载我的动态图像的html页面是：

<div id="toHide" class="pb-text-align-center">
        <img style="display: inline" src="img/load.gif" />
            <form wicket:id="safeForm" class="clearfix">
            <input type="hidden" wicket:id="submitted" value="false" />
        </form>
</div>

【问题讨论】：

你知道，现代浏览器不需要所有的评论。
代码中的代码......我们将不得不更深入。
嗯...，100000 毫秒≠ 1 分钟，至少在我的时钟上没有。 ;-)
isIE() 有什么用？您对 true 和 false 执行相同的 setTimeout。
isIE 用于验证浏览器 Internet Explorer。因为我的问题是在 IE 中设置超时。它在 FF 中运行良好。

标签： javascript

【解决方案1】：

因为setTimeout() 要求您的函数作为字符串或匿名函数传递：

setTimeout(function() { document.getElementById("safeFormec").submit(); }, 100);

【讨论】：

我不确定，但submit() 之后可能需要;。
@Anon 不应该是必需的，但会编辑它以获得正确的样式:)

【解决方案2】：

从你的行动中删除引号：

setTimeout(function() {
    document.getElementById("safeForm4d").submit();
}, 3000);

【讨论】：

【解决方案3】：

您是否尝试过从该行末尾删除函数调用括号？

document.getElementById("safeForm9c").submit()

即改为这样做：

setTimeout(document.getElementById("safeForm9c").submit, 100)

您是在告诉 IE 在 100 毫秒时间内调用 submit() 的结果，而不是调用提交。

【讨论】：

@user755323：你能澄清一下你想让我澄清什么吗？ :) 我的建议是使用setTimeoutdocument.getElementById("safeForm9c").submit, 100) 而不是setTimeoutdocument.getElementById("safeForm9c").submit(), 100)。我不确定这是否真的导致了您遇到的问题，但看起来可能是这样。
@user755323：对不起，我的错，我错过了一个括号 - 我的意思是setTimeout(document.getElementById("safeForm9c").submit, 100)
我很确定，如果您将 submit 方法从表单的上下文中分离出来（就像您将其传递给另一个函数一样），那么它在执行时将不起作用取决于 this 是它将操作的形式（这就是 document.createElement('form').submit.call(form_with_a_control_named_submit) 起作用的原因。
@大卫：嗯！我没有意识到这一点。（仍然有兴趣查看 OP 是否从此代码中收到不同的错误消息。）

【解决方案4】：

尝试将它们包装在一个函数中：

setTimeout(function(){ document.getElementById("safeForm4d").submit(); }, 100);

【讨论】：

+1: 如果需要提供参数值，setTimeout 应该只是对函数或带有函数调用的字符串的引用。
当我执行此动画或动态页面加载时，即加载请稍候在 IE 中没有发生。

【解决方案5】：

试试这样的

setTimeout(function(){document.getElementById("safeForm9c").submit();}, 100);

在过去，setTimeout 完成函数是字符串格式，但现在我们以这种方式使用它。这种方式也可以在超时完成时做更多的事情。

【讨论】：

“通常”？不，这些天传递字符串是不正常的。传递函数是正常的。使用字符串意味着它会被评估，这很慢，难以调试，并且会破坏范围。
确实如此，但是在您找到的所有文档中，您仍然会看到使用字符串的方式。这些天偏航是不正常的。
不在the documentation I always look at first 中，它确实提到了使用字符串，但它们是第二位的。
您找到的几乎所有文档：p
@Joose：90% 的东西都是垃圾，包括“文档”。

【解决方案6】：

function setsubmit()
{
   document.getElementById("safeFormec").submit();
}

setTimeout('setsubmit()',100);

【讨论】：

我做了这个，发现它工作正常，但这里的一个问题是我将时间增加到 1000 而不是 100。但是 Firefox 会在下一页做动画，但 IE 只做动画第二。我怎样才能使便携？

【解决方案7】：

改一下

 setTimeout(function() {
        'document.getElementById("safeForm4d").submit()'
    }, 3000);

到...

 setTimeout(function() {
        document.getElementById("safeForm4d").submit()
    }, 3000);

【讨论】：

当我这样做时，我收到了 Javascript 的无效参数错误。

【解决方案8】：

你可以尝试做类似的事情

setTimeout('document.getElementById("safeForm9c").submit()', 100);

可能 setTimeout 接受您要作为字符串调用的内容，以便它可以在超时后执行 eval 并在遇到字符串时运行脚本。

【讨论】：

如果使用此代码则无法正常工作，之前我的代码与上述相同。我只是将它修改为没有引号的新代码，它在 IE 中工作，错误无效参数。但是在FF动画中并没有发生。
能否将整个脚本与表单的 DOM 一起粘贴？
不要将字符串传递给 setTimeout。它打破了范围，速度很慢，并且使调试变得困难。

【解决方案9】：

把这个放在头上

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

并且拥有

 static private class SafeSubmitBehaviour extends AbstractBehavior{
    public void onRendered( Component component ) {
      super.onRendered( component );      
      StringBuffer buffer = new StringBuffer(200);
      buffer.append("<script type=\"text/javascript\" >\n");
      buffer.append("var input = $(\"input[name='submitted']\");\n");
      buffer.append("if (input.val() == \"false\") {\n"); 
      buffer.append("  input.val(\"true\");\n"); 
      buffer.append("  setTimeout(function(){ $(\"#").append(component.getMarkupId()).append("\").submit()}, 100);\n"); 
      buffer.append("}\n");
      buffer.append("else {\n $(\"#toHide\").hide();\n}"); 
      component.getResponse().write(buffer);
    }  
  }

应该渲染的

var input = $("input[name='submitted']");
if (input.val() == "false") { 
  input.val("true"); 
  setTimeout(function(){ $("#safeForm1d3").submit()}, 100); 
}else{ 
  $("#toHide").hide(); 
}

$("#toHide").show(); 你会在哪里做？

【讨论】：

. IE 中的 java 脚本错误：对象不支持此属性或方法
我在 IE 中遇到同样的错误：对象不支持此属性或方法。是否需要包含或导入 jquery？在哪里？
是的，当然你需要包含你正在使用的框架。像任何其他外部 JS 文件一样将其包含在头部
我可以在
我试过了。 java脚本错误消失了。但是动画没有在 IE 中发生。只有它发生在FF。这是我最初的问题。

【解决方案10】：

解决了我的问题。可能对其他人有用：

答案：

HTML源代码：

<SCRIPT type="text/javascript"> 
    var $ = jQuery.noConflict(); 
    document.getElementById('toHide').style.display ="";
    $('#toHide').doTimeout(1000, function() { 
        $('#toHide').find('#safeForm34').submit(); 
        document.getElementById('myAnimatedImage').src = "../../img/load.gif"; 
        });
</SCRIPT>

html:

  <div id="toHide" class="pb-text-align-center">
    <img src="img/load.gif" id='myAnimatedImage' style="margin-left: auto; margin-right: auto;"/>
    <form wicket:id="safeForm" class="clearfix" />
</div>

【讨论】：

【解决方案11】：

你可以试试：

img style="display: inline" src="img/load.gif?salt=xxxx"

xxx：表示 - 一个整数的随机数。

也许，浏览器缓存了图像，所以它不会重新绘制。或者你必须用循环设置GIF图像。

【讨论】：

【解决方案12】：

我尝试过添加函数调用，现在图像正在加载并且是动态的，但它永远不会进入下一页或永远不会清除超时。

代码：

buffer.append("setTimeout(function(){'document.getElementById(\"").append(component.getMarkupId()).append("\").submit()'}, 100);\n}else{\n");

【讨论】：

【解决方案13】：

var safeForm4d = document.getElementById("safeForm4d");
if ( safeForm4d.submitted.value == "false" ){
   safeForm4d.submitted.value = "true";
   setTimeout(function(){ safeForm4d.submit(); }, 100);
}else{
   document.getElementById("toHide").style.display="none";
}

【讨论】：

var safeForm =document.getElementById("safeForm1da"); if (safeForm.submitted.value == "false") { safeForm.submitted.value = "true"; setTimeout(function(){ safeForm.submit();}, 100); }else{ document.getElementById("toHide").style.display="none"; }

【解决方案14】：

这个：

setTimeout(function(){'document.getElementById("safeForm4d").submit()'}, 100);

不正确。你传递给“.setTimeout()”的函数什么都不做。取而代之的是，尝试：

setTimeout(function(){ document.getElementById("safeForm4d").submit(); }, 100);

不同之处在于函数的实际内容不应该被引用。在那种状态下，你得到的是一个带有单个语句的函数，该语句是一个简单的字符串值表达式。它会运行，但没有效果。

【讨论】：

它转到下一页，但在 IE 中它不显示动画或动态图像。但在 FF 中工作正常。这是我真正的问题。
您仍然没有发布任何内容来显示您正在使用“动态图像”做什么。您发布的代码似乎与表单提交有关，而不是图像。
我已经更新了主要源代码（在本页顶部）。请让我知道还有什么需要的

【解决方案15】：

两件事：

setTiemout()的正确用法是：

setTimeout(function(){
    document.getElementById("safeForm4d").submit();
}, 100);

您正在使用检票口。 wicket:id 是 DOM 不知道的。您必须分配一个 ID 并像使用表单本身一样使用这个 ID。

希望对您有所帮助。

【讨论】：

我已经修改了setTimeout并测试了，仍然没有用。 Wicket 将转换为 html 格式。
现在，它在 IE 中工作正常，但在 FF 中更改为： setTimeout(function(){ document.getElementById("safeForm4d").submit() }, 100);但在 IE 中会抛出 java 脚本错误。
哦！我忘记了函数内语句末尾的;。告诉我你遇到了什么异常。
setTimeout(function(){ document.getElementById("safeForm4d").submit()};, 100);像这样？
missing ) 在参数列表 [Break On This Error] setTimeout(fction(){document.getElementById("safeFormbc").submit()};, 100);

【解决方案16】：

setTimeout(function (){ document.getElementById("safeForm").submit() } , 100);

在JSFIDDLE查看工作示例。

注意:: 警告可能会让人恼火。

【讨论】：

当我这样做时，页面不会转到下一页。它一直在等待。
<div id="toHide" class="pb-text-align-center"> <img style="display: inline" src="img/load.gif" /> <form wicket:id="safeForm" class="clearfix"> <input type="hidden" wicket:id="submitted" value="false" /> </form> </div>
@experimentX，是一个很好的工具。还有其他工具可以识别 Java 脚本 CSS 错误吗？
@experimentX 我在 IE 中有一个问题，如果我在 settimeout 中使用函数，动画（或动态图像更改）不会发生/
@user706295 这只是一个托管 javascript 用于共享的站点。嗯....我认为萤火虫是最好的。

【解决方案17】：

setTimeout 函数抛出无效参数，因为无论调用什么

document.getElementById("safeFormec").submit()

返回（可能是一些错误消息）不是setTimeout 的有效参数，即它不能解析为函数或表达式。

对 .submit() 的调用失败，因为没有为表单 (<form action="somePage.php">) 指定操作属性。

您的意图可能不是在setTimeout 调用中进行提交，而是将提交函数作为值参数发送到setTimeout 以在一段时间后执行。像这样：

setTimeout(document.getElementById("safeFormec").submit, 100);

注意缺少的括号。

【讨论】：

【解决方案18】：

问题在于时间 100，即 1/10 秒。 IE 将仅在 100 毫秒 ie1/10 秒内加载具有动态动作的图像并停止。将时间增加到 3000，现在它工作正常。

setTimeout(function(){'document.getElementById("safeForm4d").submit()'}, 100);

FF 或其他浏览器没有问题。

【讨论】：

【解决方案19】：

在格式化您的初始帖子后，我想也许我找到了问题的一些来源。

超时中的函数是一个字符串。
您应该尝试提交表单，而不是实际的按钮。

试试这个：

if (!document.getElementById("safeForm4d").submitted.value) {
    document.getElementById("safeForm4d").submitted.value = "true";
    setTimeout(function() {
        document.forms[0].submit(); // Alt: document.forms['MyFormName'].submit()
    }, 3000);
} else {
    document.getElementById("toHide").style.display="none";
}

【讨论】：

document.forms[0].submit()，什么是forms[0]？
它是 DOM 中的一个集合，它包含页面上的所有表单元素，并使用 forms[0] 选择页面上的第一个（通常也是唯一的）表单。如果您有多个表单，请使用替代代码。
我的新代码如下所示。在 IE 中它正在工作，但有一个 Javascript 错误。但奇怪的是 FF 动画没有发生。：很抱歉我不知道如何格式化.
更新你原来的问题，更简单。
上述代码的问题在于您没有将 setTimeout 的内容包装在一个函数中，因此它可能会立即执行。另外，你为什么要把它包装在 CDATA 中？

【解决方案20】：

这永远不会给你想要的效果，因为你的从一个页面切换到另一个页面 -- 这将导致动画在新页面开始加载后消失。这将取决于许多因素，例如服务器响应所需的时间、用户计算机重新呈现新页面的速度。

如果你真的想要这种效果，你应该使用 ajax 发送表单数据，使用 .serialize()，用应该隐藏动画的响应覆盖当前页面。

更新：

要创建所需的效果，您必须使用 ajax 发布表单，然后将新的 HTML 推送到 DOM。

var $form = $('#formId');

$.ajax({
   url: $form.attr('action'),
   type: $form.attr('method'),
   data: $form.serialize(),
   success: function(response) {
    $('#loading').fadeOut(function() {
            // Get only text from the body of the result
        $('body').html($(response).find('body'));
    });
  }
});

虽然这真的很hacky，但我觉得写它很脏。严重地。您确实应该确保返回的响应不是转到：

重新加载 CSS 样式、脚本等
与该页面和搜索相关的任何特定标题、脚本、样式等都不会出现或更改。

您很可能只想将结果返回给查询，即提交的表单的搜索结果。在这种情况下，只需将结果包装在容器中并使用.find('#container') 而不是.find('body')

【讨论】：

【解决方案21】：

试试这个：

<script type="text/javascript">
    if (document.getElementById("safeForm4d").submitted.value == "false") {
        document.getElementById("safeForm4d").submitted.value = "true";
        setTimeout('document.getElementById("safeForm4d").submit()', 100);
    } else {
        document.getElementById("toHide").style.display="none";
    }
</script>

【讨论】：

很好地发现了多余的 if 语句，但是您的 setTimeout "eval" 解决方案通常被认为是做事的坏方法——尽管任何认为这是出于性能原因的人最好提供真正的指标评估与关闭！！！
当我执行此动画或动态页面加载时，即加载请稍候在 IE 中没有发生

【解决方案22】：

你在 setTimeout 事件中有引号：

setTimeout('document.getElementById("safeForm4d").submit()', 100);

如下更改你的脚本：

<script type="text/javascript">
    if (document.getElementById("safeForm4d").submitted.value == "false") {
        document.getElementById("safeForm4d").submitted.value = "true";
         if(Wicket.Browser.isIE()) {
             setTimeout(document.getElementById("safeForm4d").submit(), 100);
         } else { 
             setTimeout(document.getElementById("safeForm4d").submit(), 100);
         }
    } else {
        document.getElementById("toHide").style.display="none";
    }
</script>

【讨论】：

【解决方案23】：

终于解决了我的问题，可能对其他人有用：

答案：

HTML源代码：

<SCRIPT type="text/javascript"> 
    var $ = jQuery.noConflict(); 
    document.getElementById('toHide').style.display ="";
    $('#toHide').doTimeout(1000, function() { 
        $('#toHide').find('#safeForm34').submit(); 
        document.getElementById('myAnimatedImage').src = "../../img/load.gif"; 
        });
</SCRIPT>

html:

  <div id="toHide" class="pb-text-align-center">
    <img src="img/load.gif" id='myAnimatedImage' style="margin-left: auto; margin-right: auto;"/>
    <form wicket:id="safeForm" class="clearfix" />
</div>

【讨论】：