setTimeout在下一次通话中不起作用 [英] setTimeout doesn't work on next call
问题描述
我正在使用setTimeout显示bootstrap3进度栏.当我按提交时，它第一次显示时有效.但是，当我再次按Submit时，进度条并不是从0开始的，我试图确保使用setTimeout.
I'm using setTimeout to display a bootstrap3 progress bar. It works the first time I display it when I press submit. But when I press submit again, the progress bar doesn't start from 0 which I've tried to ensure using setTimeout.
我正在使用以下JavaScript代码:
I'm using the following JavaScript code:
$(document).ready(function() {
$("#name-form").submit(function(event) {
event.preventDefault();
$(".progress").css("display", "block");
$(".progress-bar").css("width", "0%");
setTimeout(function() {
$(".progress-bar").css("width", "70%");
}, 10000);
var $form = $(this),
url = $form.attr('action');
setTimeout(function() {
$(".progress-bar").css("width", "100%");
$('#message-heading').append("Welcome");
}, 2000);
});
});
为什么会这样?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class='container'>
<div class="row">
<div class="col-sm-offset-4 col-sm-4">
<form action="/" class="form text-center" method="post" id="name-form">
<button type="submit" class="btn btn-primary btn-lg" id="submit-id-submit">Submit</button>
<div>
<ul class='list-unstyled' id='error-list'></ul>
</div>
</form>
<br>
<div class="progress" style="display: none">
<div class="progress-bar progress-bar-striped active" role="progressbar"></div>
</div>
</div>
</div>
<div class='container text-center'>
<h3 id='message-heading'></h3>
<p id='message-body'>
</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$("#name-form").submit(function(event) {
event.preventDefault();
$(".progress").css("display", "block");
$(".progress-bar").css("width", "0%");
setTimeout(function() {
$(".progress-bar").css("width", "70%");
}, 10000);
var $form = $(this),
url = $form.attr('action');
setTimeout(function() {
$(".progress-bar").css("width", "100%");
$('#message-heading').append("Welcome");
}, 2000);
});
});
</script>
</body>
</html>
推荐答案
由于主帖中的评论，我这样回答: 看来这是一个AJAX调用，以了解要在栏中添加多少百分比.我向您推荐使用deferred并承诺对ajax调用和settimeouts进行同步化处理.
Due to comments in principal post, I answer like this: It seems that is an AJAX call to know what percent is to be pushed in the bar. I recommmend to you that uses deferred with a promise to sincronize ajax call and settimeouts.
所有jquery ajax调用都会返回一个可以像这样使用的延迟:
All jquery ajax call returns a deferred that you can use like this:
var def = $.ajax({ /* all your stuff*/ });
def.done({ /* your code when ajax is finished */ });
您可以使用许多方法来刺激调用. 如果您有任何问题，请给我们建议，我们可以为您提供帮助！
There are a lot of methods that you can play with it to sincronize callings. If you have problems with it, please, advice us and we can help you!
推迟的文档:
https://api.jquery.com/category/deferred-object/
祝你好运！
这篇关于setTimeout在下一次通话中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
