Question

Firefox中的控制台返回：

“未定义更新”

这仅适用于timer的条件。我不明白为什么。计时器中的第一个displayTimeLeft有效，而其他计时器则无效。

import $ from 'jquery';
//circle start
let progressBar;
let indicator;
let pointer;
let length = Math.PI * 2 * 100;
//circle ends
let displayOutput;
let pauseBtn;


let intervalTimer;
let timeLeft;
let wholeTime = 0.5 * 60; // manage this to set the whole time
let isPaused = false;
let isStarted = false;


export default class Timer{
  constructor(){
    this.update = this.update.bind(this);
    $(document).ready(function() {
      progressBar = document.querySelector('.e-c-progress');
      indicator = document.getElementById('e-indicator');
      pointer = document.getElementById('e-pointer');
      displayOutput = document.querySelector('.display-remain-time')
      pauseBtn = document.getElementById('pause');
      progressBar.style.strokeDasharray = length;
    });
  }

  initTimer =() => {
    this.update(wholeTime,wholeTime); //refreshes progress bar
    this.displayTimeLeft(wholeTime);
    pauseBtn.addEventListener('click',this.pauseTimer);
  }

  update = (value, timePercent) => {
    var offset = - length - length * value / (timePercent);
    progressBar.style.strokeDashoffset = offset;
    pointer.style.transform = `rotate(${360 * value / (timePercent)}deg)`;
  };

  changeWholeTime = (seconds) => {
    if ((wholeTime + seconds) > 0){
      wholeTime += seconds;
      this.update(wholeTime,wholeTime);
    }
  }

  timer = (seconds) => { //counts time, takes seconds
    let remainTime = Date.now() + (seconds * 1000);
    this.displayTimeLeft(seconds);
    //const {displayTimeLeft}=this.displayTimeLeft();
    intervalTimer = setInterval(function(){
      timeLeft = Math.round((remainTime - Date.now()) / 1000);
      if(timeLeft < 0){
        clearInterval(intervalTimer);
       isStarted = false;
    //   this.displayTimeLeft(wholeTime);
        // pauseBtn.classList.remove('pause');
        // pauseBtn.classList.add('play');
        return ;
      }
      this.displayTimeLeft(timeLeft);
    }, 1000);

  }
  pauseTimer = (event) => {
    if(isStarted === false){
      this.timer(wholeTime);
      isStarted = true;
      // this.classList.remove('play');
      // this.classList.add('pause');

    }else if(isPaused){
      // this.classList.remove('play');
      // this.classList.add('pause');
      // timer(timeLeft);
      // isPaused = isPaused ? false : true
    }else{
      // this.classList.remove('pause');
      // this.classList.add('play');
      // clearInterval(intervalTimer);
      // isPaused = isPaused ? false : true ;
    }
  }

  displayTimeLeft = (timeLeft) => { //displays time on the input
    let minutes = Math.floor(timeLeft / 60);
    let seconds = timeLeft % 60;
    let displayString = `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    displayOutput.textContent = displayString;
    this.update(timeLeft, wholeTime);
  }


}

未定义JavaScript返回函数

0 个答案: