Settimeout Doesn't Work On Next Call

February 27, 2024 Post a Comment

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 f

Solution 1:

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.

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!

The deferred documentation:

https://api.jquery.com/category/deferred-object/

Good luck!

Solution 2:

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. See attached code below:

// after click reset all existing timersfor (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><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><title>Title</title><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></head><body><divclass='container'><divclass="row"><divclass="col-sm-offset-4 col-sm-4"><formaction="/"class="form text-center"method="post"id="name-form"><buttontype="submit"class="btn btn-primary btn-lg"id="submit-id-submit">Submit</button><div><ulclass='list-unstyled'id='error-list'></ul></div></form><br><divclass="progress"style="display: none"><divclass="progress-bar progress-bar-striped active"role="progressbar"></div></div></div></div><divclass='container text-center'><h3id='message-heading'></h3><pid='message-body'></p></div></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><scripttype='text/javascript'>
    $(document).ready(function() {
  
      //initialize timer arrayvar timer = [];

      $("#name-form").submit(function(event) {
        event.preventDefault();

        // reset all existing timersfor (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>

Solution 3:

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.

typical :

functionloop() {
    ..... 
    your action
    requestId = setTimeout(loop, 2000);
 }

requestId = setTimeout(loop, 2000);

then name your timeout function and call in way above

javascript dox

Settimeout Doesn't Work On Next Call

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Settimeout Doesn't Work On Next Call"