同一页面中的两个倒计时器不能正常工作（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

您的两个计时器正在使用相同的功能并影响相同的全局变量。您应该尝试使用私有变量创建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 时，您将调用两个新的Timer实例并启动每个计数器。

Answer 2

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

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