同一页面中的两个倒计时计时器工作不正常（javascript jquery）

我的html页面中有两个倒计时按钮。当单击这两个按钮时，显示间隔为5秒，它将工作，但当第一个按钮完成或达到0时，另一个计时器也会在5秒内停止

我将把我的JS代码放在下面

//计时器的JavaScript文档
var InterValObj；
var计数=10；
var-curCount；
var代码=”；
var码长=6；
函数sendMessage（）{
curCount=计数；
var类型；
var uid=$（“#uid”）.text（）；
$（“#btnSendCode”）.attr（“禁用”、“真实”）；
$（“#btnSendCode”）.text（+curCount+”s后重新获取");
$（“#btnSendCode”）.css（'background'，'#999'）；
InterValObj=window.setInterval（SetRemainTime，1000）；
}
函数SetRemainTime（）{
如果（curCount==0）{
窗口。clearInterval（InterValObj）；
$（“#btnSendCode”）.removeAttr（“禁用”）；
$（“#btnSendCode”）.text（“获取验证码");
$（“#btnSendCode”）.css（'background'，'#8d44ad'）；
代码=”；
}否则{
凝乳--；
$（“#btnSendCode”）.text（+curCount+”s后重新获取css（'background'，'#999'）；
console.log（curCount）；
}
}
函数sendMessage1（）{
curCount=计数；
var类型；
var uid=$（“#uid”）.text（）；
$（“#btnSendCodeSec”）.attr（“禁用”、“真实”）；
$（“#btnSendCodeSec”）.文本（+curCount+”s后重新获取");
$（“#btnSendCodeSec”）.css({
“颜色”：“#999”，
“背景”：“fff”
});
InterValObj=window.setInterval（setremaintime11000）；
}
函数SetRemainTime1（）{
如果（curCount==0）{
窗口。clearInterval（InterValObj）；
$（“#btnSendCodeSec”）。删除设置（“禁用”）；
$（“#btnSendCodeSec”）。文本（“获取验证码");
$（“#btnSendCodeSec”）.css({
“颜色”：“fff”，
“背景”：“ffc343”
});
}否则{
凝乳--；
$（“#btnSendCodeSec”）.文本（+curCount+”s后重新获取.css({
“颜色”：“#999”，
“背景”：“fff”
});
}
}

您的两个计时器使用相同的函数并影响相同的全局变量。您应该尝试使用私有变量将它们创建为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
});

---

每次你点击“你的”按钮，你都会调用两个新的计时器实例并启动每个计数器。

嘿，伙计们，我终于得到了答案。我只是修改了问题中的代码

函数发送消息（id1）{
var InterValObj；
var计数=10；
var-curCount；
curCount=计数；
$（id1）.attr（“禁用”、“真实”）；
$（id1）.text（+curCount+“s后重新获取");
$（id1.css（'background'，'#999'）；
InterValObj=window.setInterval（函数（）{
如果（curCount==0）{
窗口。clearInterval（InterValObj）；
$（id1）.removeAttr（“禁用”）；
$（id1）.text（“获取验证码");
$（id1.css（'background'，'#8d44ad'）；
}
否则{
凝乳--；
$（id1）.text（+curCount+“s后重新获取css（'background'，'#999'）；
}
}, 1000); 
}
//并在不同的按钮点击时调用该函数
$（'#btnSendCode1'）。单击（函数（）{
var y=新发送消息（此）；
});
$（'#btnSendCode2'）。单击（函数（）{
var x=新发送消息（此消息）；
})

这一个非常好，可以减少代码长度。但是如何在单击时调用此函数。我的代码如下：$（'btnSendCode'）。单击（函数（）{var timer1=new Timer（10，“，6，”#btnSendCode”）；返回false；}）；很好的一个@Kiko Garcia。它没有第一次点击我！！！这一个正在工作。干杯。这是一个很好的解决方案。如果你想减少你的代码，你可以使用$（'#btnSendCode1，#btnSendCode2'）。点击（函数（）{var x=new sendmages（this）；}）；是的。我这样写是为了更好地理解。