Question

我使用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);
  });
});

为什么会这样？

＆＃13;

<!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>

＆＃13;

Answer 1

由于主要帖子的评论，我这样回答：这似乎是一个AJAX调用，知道要在栏中推送的百分比。我推荐你使用deferred，并承诺将sincronize ajax call和settimeouts。

所有jquery ajax调用都返回一个你可以这样使用的延迟：

 var def = $.ajax({ /* all your stuff*/ });
 def.done({ /* your code when ajax is finished */ });

你可以使用很多方法来解决问题。如果您遇到问题，请告诉我们，我们可以为您提供帮助！

延期文件：

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

祝你好运！

Answer 2

单击“提交”按钮时，需要重置所有现有（已在运行）的计时器。所以你确定，你从上一步开始就停止了所有事情。

我为每个setTimeout添加了两个计时器timer[0], timer[1]。请参阅下面的附件代码：

// 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);

您更新的代码段：

<!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>

Answer 3

setTimeout只运行一次作为第一个参数传递的函数，为了重复它们，我们也必须在循环结束时调用它。

典型：

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

requestId = setTimeout(loop, 2000);

然后命名你的超时功能并按上面的方式调用

setTimeout不会在下次调用时工作

3 个答案: