Question

我正在竞标拍卖网站上工作我有一个倒计时器脚本。它在窗口加载时运行良好，当我点击重启按钮时，它应该从新值重新启动倒数计时器但它不能正常工作

<script type="text/javascript">


function countDown(hrs,min,sec,gid) { 
  sec--;
  if (sec == -01) {
    sec = 59;
    min = min - 1;
  }
 else {   min = min;  }
 if (min == -01) {
    min = 59;
    hrs = hrs - 1;
  }
 else { hrs = hrs; }
if (sec<=9) { sec = "0" + sec; }
if (hrs<=9) { hrs = "0" + hrs; }
  time = hrs + ":" + (min<=9 ? "0" + min : min) + ":" + sec + "";
if (document.getElementById) { document.getElementById(gid).innerHTML = time; }
  SD=window.setTimeout("countDown("+hrs+","+min+","+sec+",'"+gid+"');", 1000);
if (hrs == '00' && min == '00' && sec == '00') { sec = "00"; window.clearTimeout(SD); }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  countDown(1,0,10,'oneT');
  countDown(0,0,28,'twoT');
  countDown(0,2,15,'threeT');
});
</script>     
<button onclick="countDown(1,0,10,'oneT')">Restart</button>
<div id="oneT" ></div>
<div id="twoT" ></div>
<div id="threeT"></div>

谢谢，Ahsan

Answer 1

<script type="text/javascript">
function resetCountdown() {
    if (SD) {
        clearTimeout(SD);
    }
    countDown(1, 0, 10, 'oneT');
}
</script> 

<button onclick="resetCountdown()">Restart</button>
<div id="oneT" ></div>

您需要清除正在使用的每个变量的超时时间。

Answer 2

问题是你的onclick事件调用countDown而没有清除由你的原始countDown调用启动的setTimeout排队的countDown调用。这导致对countDown的两个竞争系列调用。当您单击＆＃34;重新启动＆＃34;时，您可以使用当前代码查看此信息：有时计数器会增加然后减少，因为countDown调用的两个竞争字符串都会更改显示的时间。

解决方案（代码更改最少）是将setTimeout对象存储在全局变量中。然后，您可以在重新启动计时器之前使用clearTimeout取消对countDown的任何挂起调用。这可以在一个新函数restartTimer中完成。

＆＃13;

<html>
<script type="text/javascript">

var timers = {};

function countDown(hrs,min,sec,gid) { 
  sec--;
  if (sec == -01) {
    sec = 59;
    min = min - 1;
  }
 else {   min = min;  }
 if (min == -01) {
    min = 59;
    hrs = hrs - 1;
  }
 else { hrs = hrs; }
if (sec<=9) { sec = "0" + sec; }
if (hrs<=9) { hrs = "0" + hrs; }
  time = hrs + ":" + (min<=9 ? "0" + min : min) + ":" + sec + "";
if (document.getElementById) { document.getElementById(gid).innerHTML = time; }
  timers[gid]=window.setTimeout("countDown("+hrs+","+min+","+sec+",'"+gid+"');", 1000);
if (hrs == '00' && min == '00' && sec == '00') { sec = "00"; window.clearTimeout(timers[gid]); }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  countDown(1,0,10,'oneT');
  countDown(0,0,28,'twoT');
  countDown(0,2,15,'threeT');
});

function restartTimer(hrs, min, sec, gid) {
  window.clearTimeout(timers[gid]);
  timers[gid] = countDown(hrs, min, sec, gid);
}

</script>     
<button onclick="restartTimer(1,0,10,'oneT')">Restart</button>
<div id="oneT" ></div>
<div id="twoT" ></div>
<div id="threeT"></div>
</html>

＆＃13;

在下一个按钮单击时重新启动countdwon计时器

2 个答案: