我不能在Javascript中的另一個類函式中呼叫一個類函式-有解無憂

我想在“startTimer”中呼叫函式“displayTime”，但由于某種原因，我在控制臺中得到“Uncaught TypeError：this.displayTime is not a function”。

let endTimer = "0";
let isRunning = false;

//! CLASS
class Timer {
  constructor(endTimer, isRunning) {
    this.endTimer = endTimer;
    this.isRunning = isRunning;
  }

  startTimer() {
    if (this.endTimer === "0") {
      this.endTimer = new Date().getTime()   1500000;
    }
    displayTime();
    if (this.isRunning === true) {
      this.pauseTimer();
      this.isRunning
    }
    this.isRunning = true;
  }

  displayTime() {
    let now = new Date().getTime();
    let remainingTime = this.endTimer - now;
    let minutes = Math.floor(remainingTime / 1000 / 60);
    let seconds = Math.floor((remainingTime / 1000) % 60);
    if (seconds < 10) {
      seconds = "0"   seconds;
    }
    timer.innerHTML = `<h1>${minutes}:${seconds}</h1>`;
    start.textContent = "STOP"
    this.update = setInterval(this.displayTime, 100);
  }
}

let newTimer = new Timer(endTimer, isRunning);

//! EVENT LISTENERS

start.addEventListener("click", newTimer.startTimer);

我認為我遺漏了一些明顯的東西，但我不明白是什么......

uj5u.com熱心網友回復：

start.addEventListener("click", newTimer.startTimer.bind(newTimer));

uj5u.com熱心網友回復：

呼叫 displayTime(); 沒有前置關鍵字“this”是GenericUser和Heretic Monkey在上面的評論中提到的主要問題（下面的第 16 行）。

您可能已經知道這一點，但您也需要定義一個 pauseTimer() 方法/函式。

let endTimer = "0";
let isRunning = false;

//! CLASS
class Timer {
constructor(endTimer, isRunning) {
    this.endTimer = endTimer;
    this.isRunning = isRunning;
  }
}

Timer.prototype.startTimer = function() {
    if (this.endTimer === "0") {
        this.endTimer = new Date().getTime()   1500000;
    }
    this.displayTime(); // this is the important line
    if (this.isRunning === true) {
        this.pauseTimer();
        this.isRunning
    }
    this.isRunning = true;
}

Timer.prototype.displayTime = function() {
    let now = new Date().getTime();
    let remainingTime = this.endTimer - now;
    let minutes = Math.floor(remainingTime / 1000 / 60);
    let seconds = Math.floor((remainingTime / 1000) % 60);
    if (seconds < 10) {
    seconds = "0"   seconds;
    }
    //timer.innerHTML = `<h1>${minutes}:${seconds}</h1>`;
    //start.textContent = "STOP"
    this.update = setInterval(this.displayTime, 100);
}

Timer.prototype.pauseTimer = function() {
    this.isRunning = false;
}

let newTimer = new Timer("0", true);
newTimer.startTimer();

//! EVENT LISTENERS

//start.addEventListener("click", newTimer.startTimer);

uj5u.com熱心網友回復：

class Timer {
    startTimer() {
        // You forgot this keyword
        this.displayTime();
    }
    displayTime() {
        console.log('do something');
    }

}

let newTimer = new Timer();

// addEventListener changes the context of this.
// Using an arrow function will keep 'this' keyword in tact inside startTimer method 
start.addEventListener('click', () => newTimer.startTimer)

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/413707.html

標籤：

上一篇：如何為對類的多次呼叫保持相同的欄位值

下一篇：醫療大資料安全——基于區塊鏈的委托量子云架構