javascript - 同一页面中的两个倒计时器无法正常工作(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

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