我正在使用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="maxcdn.bootstrapcdn/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="ajax.googleapis/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="maxcdn.bootstrapcdn/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!
推迟的文档:
api.jquery/category/deferred-object/
祝你好运！
更多推荐
setTimeout在下一次通话中不起作用
发布评论