我正在使用 setTimeout 来显示 bootstrap3 进度条。当我按下提交时第一次显示它时它就起作用了。但是当我再次按下提交时，进度条不会从 0 开始，我已尝试使用 setTimeout 来确保这一点。
我使用以下 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);
});
});
为什么会发生这种情况？
<!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 并 promise 同步 ajax 调用和设置超时。
所有 jquery ajax 调用都会返回一个延迟，您可以像这样使用:
var def = $.ajax({ /* all your stuff*/ });
def.done({ /* your code when ajax is finished */ });
您可以使用很多方法来同步调用。 如果您遇到问题，请向我们提出建议，我们可以为您提供帮助!
延迟的文档:
https://api.jquery.com/category/deferred-object/
祝你好运!
关于javascript - setTimeout 在下次调用时不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31291729/