javascript - 10 秒后隐藏 javascript 消息

Question

我是 AJAX/Jquery/Javaascript 的新手所以请原谅我的无知。我找到了一些代码来帮助我在单击表单提交按钮后显示 AJAX 窗口。

代码如下:

var ray={
ajax:function(st)
    {
        this.show('load');
    },
show:function(el)
    {
        this.getID(el).style.display='';
    },
getID:function(el)
    {
        return document.getElementById(el);
    }
}

这是表单的 HTML:

<div id="load" style="display:none;">Loading... Please wait.</div>
<form action="test_form.php" method="POST" onsubmit="return ray.ajax()">
<input type="hidden" name="value1" value="value1>">
<input type="submit" value="Submit">
</form>

单击按钮时加载消息显示得很好，但永远不会消失。理想情况下，我希望消息在工作完成后消失，但在 10 秒后隐藏它也同样有效。

我尝试过使用 hide() 和 setTimeout() 进行各种编辑，但我缺乏使用 AJAX/JavaScript 的经验导致代码不断出错。

Answer 1

给你: http://jsfiddle.net/DHgN4/1/

您在问题下方的评论中说您只希望它在 10 秒后关闭。这将做到这一点。

显然，我必须注释掉您的 form，因为 fiddle 无法调用 test_form.php，这就是我创建一个按钮来演示代码的原因。它应该足以让你去。 fiddle 的主要部分是这一行:

setTimeout(function(){$("#load").hide();},10000);

这将在 10 秒后使用 jQuery 隐藏它。如果您不想使用 jQuery，则将其更改为...

setTimeout(function(){document.getElementById('load').style.display='none';},10000);

我不明白你为什么要这样设置。进行真正的 ajax 调用，使用 ajax 发送数据，然后等待并根据响应使用react会更清晰。