javascript 按下提交按钮后延迟 jQuery Ajax 加载器 3 秒
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25061394/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Delay jQuery Ajax loader for 3 seconds after submit button is pushed
提问by JohnA10
I'm using a simple jQuery to show an animation DIV created with CSS after SUBMIT button is pushed. My issue is that when the server response is fast, the DIV is shown for justs some milliseconds. I'd like to display it for at least 3 seconds, regardless if the server response is fast or slow.
我正在使用一个简单的 jQuery 来显示按下提交按钮后用 CSS 创建的动画 DIV。我的问题是，当服务器响应很快时，DIV 只显示几毫秒。我想显示它至少 3 秒，无论服务器响应是快还是慢。
HTML:
HTML：
<form class="search_cars" action="http://www.domain.com/searchresults" method="get">
<label>
<select name="model">
<option value="" selected="selected">Select Make</option>
<option value="Acura">Acura</option>
<option value="...">...</option>
</select>
</label>
<label>
<select name="type">
<option value="" selected="selected">All Models</option>
<option value="...">..models script...</option>
</select>
</label>
<label><input name="zip" type="tel" maxlength="5" id="zip" placeholder="zip code" /></label>
<label><input name="submit" type="submit" value="search" class="search_button" /></label>
</form>
jQUERY:
查询：
$(".search_button").click(function(e) {
$('#loadingProgressG').show();
$.ajax({
success: function(data) {
$('#loadingProgressG').hide();
},
error: function() {
$('#loadingProgressG').hide();
}
});
});
Looking at other threads at StackOverflow, I already tried thispossible solution, changing:
查看 StackOverflow 上的其他线程，我已经尝试过这种可能的解决方案，更改：
$('#loadingProgressG').hide();
By
经过
$('#loadingProgressG').delay(3000).hide(400);
But it didn't work. Also triedchanging the same line by:
但它没有用。还尝试通过以下方式更改同一行：
setTimeout(function() {
$('#loadingProgressG').hide();
}, 3000);
And nothing. The most probably is that I'm doing something wrong, I'm not a jQuery guru. Any help or advice is appreciated.
没别的了。最有可能的是我做错了什么，我不是 jQuery 大师。任何帮助或建议表示赞赏。
** I just noticed that using setTimeoutworks for the time set, only if some form validation stop the process.
** 我刚刚注意到使用setTimeout对设置的时间有效，只有当某些表单验证停止该过程时。
回答by jonsuh
Your example should work. My only guess is that since you have the submit button tied to a form, it's processing the form as opposed to successfully running the function after the AJAX is completed.
你的例子应该有效。我唯一的猜测是，由于您将提交按钮绑定到表单，因此它正在处理表单，而不是在 AJAX 完成后成功运行该函数。
In order to prevent the form from processing, you want to preventDefault()then run what you want to run.
为了防止表单被处理，你想preventDefault()然后运行你想要运行的东西。
EDIT:Assuming that you need the form to actually process, you would submit the form after the 3000 setTimeout. Like such:
编辑：假设您需要实际处理表单，您将在 3000 setTimeout 之后提交表单。像这样：
JSFiddle: DEMO
JSFiddle：演示
For the submit button, use a <button>instead:
对于提交按钮，请改用 a <button>：
<label><button class="search_button">search</button></label>
Then do the following for the JavaScript:
然后对 JavaScript 执行以下操作：
$(".search_cars").submit(function (e) {
e.preventDefault();
var form = this;
$("#loadingProgressG").show();
setTimeout(function () {
$("#loadingProgressG").hide();
form.submit();
}, 3000); // in milliseconds
});
回答by Michael Bearjaws
You will want to wrap $('#loadingProgressG').hide(); into a settimeout function.
你会想要包装 $('#loadingProgressG').hide(); 进入设置超时功能。
Example:
例子：
setTimeout(function() {
$('#loadingProgressG').hide();
}, 3000)
回答by 317
The page is loaded before the end of the JavaScript.
页面在 JavaScript 结束之前加载。
You have to prevent the default behavior. Use the function preventDefault() on your e object like this:
您必须阻止默认行为。在您的 e 对象上使用函数 preventDefault() ，如下所示：
$(".search_button").click(function(e) {
e.preventDefault();
$.ajax({
success: function(data) {
$('#loadingProgressG').hide();
$(".search_cars").submit();
},
error: function() {
$('#loadingProgressG').hide();
}
});
});
