javascript - setTimeout doesn't work on next call -
i'm using settimeout display bootstrap3 progress bar. works first time display when press submit. when press submit again, progress bar doesn't start 0 i've tried ensure using settimeout.
i'm using 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); }); }); why 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>
due comments in principal post, answer this: seems ajax call know percent pushed in bar. recommmend uses deferred promise sincronize ajax call , settimeouts.
all jquery ajax call returns deferred can use this:
var def = $.ajax({ /* stuff*/ }); def.done({ /* code when ajax finished */ }); there lot of methods can play sincronize callings. if have problems it, please, advice , can you!
the deferred documentation:
https://api.jquery.com/category/deferred-object/
good luck!
Comments
Post a Comment