在同一頁中的兩個倒計時器無法正常工作（javascript jquery）

Question

我在我的html頁面中有兩個倒數計時器按鈕。當單擊這兩個按鈕時，在5秒的間隔內，它將工作，但是當第一個完成時或達到0，另一個計時器也停在5秒。

我會把我的JS代碼放在下面。

// JavaScript Document for timer 
 
var InterValObj; 
 
var count = 10; 
 
var curCount; 
 
var code = ""; 
 
var codeLength = 6; 
 

 
function sendMessage() { 
 
    curCount = count; 
 
    var dealType; 
 
    var uid = $("#uid").text(); 
 

 
    $("#btnSendCode").attr("disabled", "true"); 
 
    $("#btnSendCode").text(+curCount + "s後重新獲取"); 
 
    $("#btnSendCode").css('background', '#999'); 
 
    InterValObj = window.setInterval(SetRemainTime, 1000); 
 
} 
 

 
function SetRemainTime() { 
 
    if (curCount == 0) { 
 
    window.clearInterval(InterValObj); 
 
    $("#btnSendCode").removeAttr("disabled"); 
 
    $("#btnSendCode").text("獲取驗證碼"); 
 
    $("#btnSendCode").css('background', '#8d44ad'); 
 
    code = ""; 
 
    } else { 
 
    curCount--; 
 
    $("#btnSendCode").text(+curCount + "s後重新獲取").css('background', '#999'); 
 
    console.log(curCount); 
 
    } 
 
} 
 

 
function sendMessage1() { 
 
    curCount = count; 
 
    var dealType; 
 
    var uid = $("#uid").text(); 
 

 
    $("#btnSendCodeSec").attr("disabled", "true"); 
 
    $("#btnSendCodeSec").text(+curCount + "s後重新獲取"); 
 
    $("#btnSendCodeSec").css({ 
 
    "color": "#999", 
 
    "background": "#fff" 
 
    }); 
 
    InterValObj = window.setInterval(SetRemainTime1, 1000); 
 
} 
 

 
function SetRemainTime1() { 
 
    if (curCount == 0) { 
 
    window.clearInterval(InterValObj); 
 
    $("#btnSendCodeSec").removeAttr("disabled"); 
 
    $("#btnSendCodeSec").text("獲取驗證碼"); 
 
    $("#btnSendCodeSec").css({ 
 
     "color": "#fff", 
 
     "background": "#ffc343" 
 
    }); 
 
    } else { 
 
    curCount--; 
 
    $("#btnSendCodeSec").text(+curCount + "s後重新獲取").css({ 
 
     "color": "#999", 
 
     "background": "#fff" 
 
    }); 
 
    } 
 
}

Answer 1

嘿，大家好，我終於得到了答案。我只是修改了問題中提出的代碼。

function sendMessage(id1) { 
 
\t \t \t var InterValObj; 
 
\t \t \t var count = 10; 
 
\t \t \t var curCount; 
 
\t \t \t curCount = count; 
 
\t \t \t 
 
\t \t \t $(id1).attr("disabled", "true"); 
 
\t \t \t $(id1).text(+ curCount + "s後重新獲取"); 
 
\t \t \t $(id1).css('background','#999'); 
 
\t \t \t InterValObj = window.setInterval(function(){ 
 
\t \t 
 
\t \t \t if (curCount ===0) {     
 
\t \t \t \t window.clearInterval(InterValObj); 
 
\t \t \t \t $(id1).removeAttr("disabled"); 
 
\t \t \t \t $(id1).text("獲取驗證碼"); 
 
\t \t \t \t $(id1).css('background','#8d44ad'); 
 
\t \t \t } 
 
\t \t \t else { 
 
\t \t \t \t curCount--; 
 
\t \t \t \t $(id1).text(+ curCount + "s後重新獲取").css('background','#999'); 
 
\t \t \t } 
 
\t \t \t }, 1000); 
 
\t \t } 
 
    
 
    //and called the function on different button clicks 
 
    
 
    $('#btnSendCode1').click(function() { 
 
     var y= new sendMessage(this); 
 
    }); 
 

 
    $('#btnSendCode2').click(function() { 
 
     var x= new sendMessage(this); 
 
    })

Answer 2

你兩個定時器都使用相同的功能和影響同一全局變量。你應該嘗試創建它們作爲Javascript對象與私人變量。

例如：

function Timer(count, code, codeLength, btnId) { 
    this.InterValObj = null; 
    this.count = count; 
    this.curCount = null; 
    this.code = code; 
    this.codeLength = codeLength; 
    this.btnId = btnId; 
} 

Timer.prototype.sendMessage = function() { 
    this.curCount = this.count; 
    var dealType; 
    var uid = $("#uid").text(), obj = this; 
    $(this.btnId).attr("disabled", "true") 
     .text(+this.curCount + "s後重新獲取") 
     .css('background', '#999'); 
    this.InterValObj = window.setInterval(function() { 
     obj.SetRemainTime(); 
    }, 1000); 
} 

Timer.prototype.SetRemainTime = function() { 
    if (this.curCount == 0) { 
     window.clearInterval(this.InterValObj); 
     $(this.btnId).removeAttr("disabled") 
      .text("獲取驗證碼") 
      .css('background', '#8d44ad'); 
      this.code = ""; 
    } else { 
     this.curCount--; 
     $(this.btnId).text(+this.curCount + "s後重新獲取").css('background', '#999'); 
     console.log(this.curCount); 
    } 
} 

然後你就可以實例兩個定時器：

var timer1 = new Timer(10, "", 6, "#btnSendCode"), 
    timer2 = new Timer(10, "", 6, "#btnSendCode"); 

這是面向JavaScript對象，尋找它。

編輯

你的實例本身不會做任何事情。您需要使用這些功能，例如timer.sendMessage()來啓動您的計數器。所以，你的事件觸發會是這樣的：你點擊

$("#yourButton").click(function(e) { 
    e.preventDefault(); 
    var timer1 = new Timer(10, "", 6, "#btnSendCode"), 
     timer2 = new Timer(10, "", 6, "#btnSendCode"); 
    timer1.sendMessage(); // starts timer1 - also working as a restart 
    timer2.sendMessage(); // starts timer2 - also working as a restart 
}); 

每次上#yourButton您將調用定時器的兩個新實例，並開始每個櫃檯。