setTimeout在下一次通话中不起作用
[英]setTimeout doesn't work on next call
问题描述
I'm using setTimeout to display a bootstrap3 progress bar. 
我正在使用setTimeout显示bootstrap3进度栏。 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 . 但是，当我再次按Submit时，进度条并非从0开始，我试图确保使用setTimeout 。
I'm using the following JavaScript code: 我正在使用以下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);
});
});
Why is this happening? 为什么会这样呢？
<!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>
3 个解决方案
解决方案1
1 已采纳 2015-07-08 12:46:54
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. 由于在主要帖子中有评论，我的回答是这样的：看来这是AJAX调用，用于了解要在栏中添加什么百分比。 I recommmend to you that uses deferred with a promise to sincronize ajax call and settimeouts. 我向您推荐使用deferred并承诺ajax调用和settimeouts。
All jquery ajax call returns a deferred that you can use like this: 所有jquery ajax调用都返回一个可以像这样使用的延迟：
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! 如果您有任何问题，请给我们建议，我们可以为您提供帮助！
The deferred documentation: 延迟的文档：
https://api.jquery.com/category/deferred-object/ https://api.jquery.com/category/deferred-object/
Good luck! 祝好运！
解决方案2
1 2015-07-08 12:52:48
When you click on submit button, you need to reset all existing (already running) timers. 当您单击提交按钮时，您需要重置所有现有（已经运行）的计时器。 So you are sure, that you stop everything from previous step. 因此，您可以确定停止上一步中的所有操作。
I added two timers timer[0], timer[1] for each setTimeout. 我为每个setTimeout添加了两个计时器timer[0], timer[1] 。 See attached code below: 请参见下面的附加代码：
// after click reset all existing timers
for (var i = 0; i < timer.length; i++) {
if (timer[i]) {
clearTimeout(timer[i]);
timer[i] = null;
}
};
//set timers
timer[0] = setTimeout(function() {
// your code
}, 10000);
timer[1] = setTimeout(function() {
// your code
}, 2000);
Your updated snippet: 您更新的代码段：
<!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() { //initialize timer array var timer = []; $("#name-form").submit(function(event) { event.preventDefault(); // reset all existing timers for (var i = 0; i < timer.length; i++) { if (timer[i]) { clearTimeout(timer[i]); timer[i] = null; } }; $(".progress").css("display", "block"); $(".progress-bar").css("width", "0%"); // set first timer timer[0] = setTimeout(function() { $(".progress-bar").css("width", "70%"); }, 10000); var $form = $(this), url = $form.attr('action'); // set second timer timer[1] = setTimeout(function() { $(".progress-bar").css("width", "100%"); $('#message-heading').append("Welcome"); }, 2000); }); }); </script> </body> </html>
解决方案3
0 2015-07-08 11:59:54
setTimeout runs the function passed as the first parameter only once, for repeat them we have to call it also at the end of the loop. setTimeout仅将作为第一个参数传递的函数运行一次，要重复它们，我们还必须在循环结束时调用它。
typical : 典型的：
function loop() {
.....
your action
requestId = setTimeout(loop, 2000);
}
requestId = setTimeout(loop, 2000);
then name your timeout function and call in way above 然后命名您的超时函数并按上述方式进行调用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.