Jquery倒计时器失败

时间:2017-05-31 07:20:00

标签: javascript jquery timer

我需要在循环中向用户显示一些问题,并且在显示问题时需要显示倒数计时器,如下所示:

function progress(timeleft, timetotal, $element) {
    var progressBarWidth = timeleft * $element.width() / timetotal;
    $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear');
    if(timeleft > 0) {
        setTimeout(function() {
            progress(timeleft - 1, timetotal, $element);
        }, 1000);
    }
};

$('document').ready(function() {

  $('#start').click(function() {
    progress(5, 5, $('#progressBar'));
  });

});
#progressBar {
  width: 90%;
  margin: 10px auto;
  height: 22px;
  background-color: #0A5F44;
}

#progressBar div {
  height: 100%;
  text-align: right;
  padding: 0 10px;
  line-height: 22px; /* same as #progressBar height if we want text middle aligned */
  width: 100%;
  background-color: #CBEA00;
  box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button id='start'>Start</button>
<div id="progressBar">
  <div></div>
</div>

问题是:如果我启动计时器(按下小提琴中的开始按钮),当它已经开始和关闭时,它开始做疯狂的事情:上下移动。 我想这与setTimeout()的递归性质有关。 如何重新初始化计时器(progressBar函数)?

2 个答案:

答案 0 :(得分:3)

你必须清除超时。像这样:

function progress(timeleft, timetotal, $element) {
    var progressBarWidth = timeleft * $element.width() / timetotal;
    $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear');
    if(timeleft > 0) {
    if (window.timer) {
      clearTimeout(window.timer)
    }
    window.timer = setTimeout(function() {
            progress(timeleft - 1, timetotal, $element);
        }, 1000);
    }
};

$('document').ready(function() {

  $('#start').click(function() {
    progress(5, 5, $('#progressBar'));
  });

});
#progressBar {
  width: 90%;
  margin: 10px auto;
  height: 22px;
  background-color: #0A5F44;
}

#progressBar div {
  height: 100%;
  text-align: right;
  padding: 0 10px;
  line-height: 22px; /* same as #progressBar height if we want text middle aligned */
  width: 100%;
  background-color: #CBEA00;
  box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button id='start'>Start</button>
<div id="progressBar">
  <div></div>
</div>

答案 1 :(得分:1)

将超时存储在变量中,并在想要重新开始时将其清除。

var animating = null;
function progress(timeleft, timetotal, $element) {
    var progressBarWidth = timeleft * $element.width() / timetotal;
    $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear');
    if(timeleft > 0) {
        clearTimeout(animating);
        animating = setTimeout(function() {
            progress(timeleft - 1, timetotal, $element);
        }, 1000);
    }
};

$('document').ready(function() {

  $('#start').click(function() {
    progress(5, 5, $('#progressBar'));
  });

});
#progressBar {
  width: 90%;
  margin: 10px auto;
  height: 22px;
  background-color: #0A5F44;
}

#progressBar div {
  height: 100%;
  text-align: right;
  padding: 0 10px;
  line-height: 22px; /* same as #progressBar height if we want text middle aligned */
  width: 100%;
  background-color: #CBEA00;
  box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button id='start'>Start</button>
<div id="progressBar">
  <div></div>
</div>