重新啓動countdwon計時器在下一個按鈕單擊

-2

我正在拍賣競標拍賣網站我有一個倒數計時器腳本。其對窗口的負荷運作良好，當我在重新啓動按鈕，單擊它應該重新啓動從新值倒數計時器，但它不工作重新啓動countdwon計時器在下一個按鈕單擊

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

感謝，阿赫桑

來源

2017-04-26 Ahsan Malik

問題是，您的onclick事件調用countDown而不清除由您的原始countDown調用啓動的setTimeout中排隊的countDown調用。這導致了對countDown的兩個相互競爭的一系列調用。當你點擊「重新啓動」時，你可以使用你當前的代碼來看到它：有時計數器會增加然後減少，因爲兩個競爭的countDown調用字符串都會改變顯示的時間。

解決方案（使用最少的代碼更改）是將setTimeout對象存儲在全局變量中。然後，您可以使用clearTimeout在重新啓動定時器之前取消對countDown的任何未決呼叫。這可以在一個新的函數restartTimer中完成。

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

來源

2017-04-26 18:35:47 cjg

它的工作原理非常感謝 –

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

你需要清除超時對於你正在使用的每個變量來工作。

來源

2017-04-26 18:31:56

重新啓動countdwon計時器在下一個按鈕單擊

回答

相關問題