Two Countdown timer in same page not working properly (javascript jquery)

Question

I have Two count down timer button in my html page.When clicked both buttons say, in a 5 seconds gap, it will work but when the first one finished or reached 0 ,the other timer also stops in 5s.

I will put my JS code below.

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

Your two timers are using the same functions and affecting the same global vars. You should try creating them as Javascript Object's with private vars.

For example:

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

And then you will be able to instance both timers:

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

This is Javascript Object Oriented, look for it.

EDIT

Your instances won't do anything by itself. You need to use the functions, for example, timer.sendMessage() to start your counter. So your event trigger will look like this:

$("#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
});

Everytime you click on #yourButton you will call two new instances of Timer and start each counter.

Answer 2

Hey guys finally I got the answer.I just modified the codes asked in the questions.

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