javascript - 从同一对象的不同实例中触发另一个实例的函数

Question

我是 Javascript 的初学者，正在努力弄清楚如何使用一个实例的函数来触发另一个实例中的函数，反之亦然，两者都属于同一类。让我解释一下我的意思。

我的项目是用 Javascript 构建一个番茄钟。番茄工作法是一个过程，您工作指定的时间(例如 25 分钟)，然后短暂休息(5 分钟)，然后重复。时钟应该无限期地连续运行或直到用户停止为止。

我需要一个时钟完成才能触发另一个时钟的开始，反之亦然。

我为每个计时器使用完全独立、略有不同的函数(有很多冗余)构建了一个工作程序。我尝试通过创建一个计时器类并从中构建每个计时器来简化我的代码。这就是我陷入困境的地方。

我的 Timer 类中有一个函数，当计时器达到零时，需要调用另一个计时器的倒计时来开始(Codepen 上的第 126 行)。我怎样才能做到这一点？

感谢您提供的任何帮助。

这是我在 Codepen 上的项目:https://codepen.io/lieberscott/pen/baRpgx?editors=1010

下面是我的 Javascript 代码:

let session; // session Timer object instance
let btimer; // break Timer object instance

let s_off; // boolean for whether session timer is off or on
let s_timer; // reference to session timer HTML element
let s_stop; // reference to session stop HTML button
let s_increase; // reference to session increase HTML button
let s_decrease; // reference to session decrease HTML button

// same variables as above for break timer
let b_off;
let b_timer;
let b_stop;
let b_increase;
let b_decrease;


$(document).ready(function() {
  s_off = true;
  s_timer = $("#timer");
  s_stop = $("#stop");
  s_increase = $("#increase");
  s_decrease = $("#decrease");
  b_off = true;
  b_timer = $("#breaktimer");
  b_stop = $("#breakstop");
  b_increase = $("#breakincrease");
  b_decrease = $("#breakdecrease");

  session = new Timer(1, 60, s_off, s_timer, s_stop, s_increase, s_decrease);
  btimer = new Timer(5, 60, b_off, b_timer, b_stop, b_increase, b_decrease);

  // increase session minutes
  $(s_increase).on("click", function() {
    if (session.off) {
      session.min++;
      session.sec = 00;
      s_timer.html(session.min + ":" + session.sec);
    }
  });

  // decrease session minutes
  $(s_decrease).on("click", function() {
    if (session.off) {
      if (session.min > 1) {
        session.min--;
      }
      session.sec = 00;
      s_timer.html(session.min + ":" + session.sec);
    }
  });

  // increase break minutes
  $(b_increase).on("click", function() {
    if (btimer.off) {
      btimer.min++;
      btimer.sec = 00;
      b_timer.html(btimer.min + ":" + btimer.sec);
    }
  });

  // decrease break minutes
  $(b_decrease).on("click", function() {
    if (btimer.off) {
      if (btimer.min > 1) {
        btimer.min--;
      }
      btimer.sec = 00;
      b_timer.html(btimer.min + ":" + btimer.sec);
    }
  });

  // begin session timer by clicking on the timer itself
  $(s_timer).on("click", function() {
    session.time();
  });

  // stop session timer
  $(s_stop).on("click", function() {
    session.off = true;
    session.stopClock(session.intervalFunction);
  });

  // stop break timer
  $(b_stop).on("click", function() {
    btimer.off = true;
    btimer.stopClock(btimer.intervalFunction);
  });

});


class Timer {
  constructor(min, sec, off, disp, stopButton, increaseButton, decreaseButton) {
    this.min = min; // minutes
    this.minsSet = min; // minutes again, this will be used to reset the timer
    this.sec = sec;
    this.off = off; // boolean saying whether timer is off or not
    this.disp = disp; // HTML display
    this.stopButton = stopButton;
    this.increaseButton = increaseButton;
    this.decreaseButton = decreaseButton;
    this.func;
  }

  time() { // function fired when the timer is clicked
    if (this.off) {
      this.off = false;
      this.func = this.intervalFunc();
    }
  }

  intervalFunc() { // set the interval of the timer
    setInterval(function() {this.countdown();}, 1000); // ERROR HERE
  }

  countdown() { // interval to complete for duration of timer
    // check if clock reaches zero
    if (this.sec == 0) {
      this.min--;
      this.sec = 60;
      if (this.min < 0) {
        this.min = this.minsSet;
        this.sec = 0;
        this.off = true;
        this.time(); // this needs to trigger, not this.time(), but the OTHER object's time() function
        this.stopClock(this.func); // clearInterval() function below
      }
    }

    // if clock is not at 0:00, display new time
    this.sec--;
    let m = this.min.toString();
    let s;
    if (this.sec < 10) {
      s = "0" + this.sec.toString()
    }
    else {
      s = this.sec.toString();
    }
    this.disp.html(m + ":" + s);
  }

  stopClock() {
    clearInterval(this.func);
  }
}

Answer 1

1)我尝试了你的代码并修复了一些错误，你的 setInterval 问题是因为“this”指向那里的窗口对象。

2)为了调用另一个对象的 time() 方法，首先你需要知道你正在使用哪个对象，所以我在类中添加了一个类型变量，然后在倒计时函数中我添加了一个检查。更改就在这支笔中:

https://codepen.io/yaduvanshi/pen/dJRdeR?editors=0010

intervalFunc() { // set the interval of the timer
   var that =this;
   setInterval(function() {that.countdown();}, 1000); // ERROR HERE
}