Countdown-timer in Reagieren

Ich habe gesehen, viele countdown-Timer in JavaScript und wollte eins zu bekommen, arbeiten Reagieren.

Ich ausgeliehen haben, diese Funktion habe ich online gefunden:

secondsToTime(secs){
    let hours = Math.floor(secs / (60 * 60));

    let divisor_for_minutes = secs % (60 * 60);
    let minutes = Math.floor(divisor_for_minutes / 60);

    let divisor_for_seconds = divisor_for_minutes % 60;
    let seconds = Math.ceil(divisor_for_seconds);

    let obj = {
        "h": hours,
        "m": minutes,
        "s": seconds
    };
    return obj;
  };

Und dann Schreibe ich diesen code selbst

  initiateTimer = () => {
    let timeLeftVar = this.secondsToTime(60);
    this.setState({ timeLeft: timeLeftVar })
  };

  startTimer = () => {
    let interval = setInterval(this.timer, 1000);
    this.setState({ interval: interval });
  };

  timer = () => {
    if (this.state.timeLeft >0){
      this.setState({ timeLeft: this.state.timeLeft -1 });
    }
    else {
      clearInterval(this.state.interval);
      //this.postToSlack();
    }
  };

Derzeit onclick-es wird die Uhrzeit auf dem Bildschirm an: Time Remaining: 1 m : 0 s
Aber es reduziert sich nicht es zu Time Remaining: 0 m : 59 s und dann Time Remaining: 0 m : 58 s etc etc

Ich glaube, ich muss die Funktion erneut aufrufen mit einem anderen parameter. wie kann ich über das tun dies ?

EDIT: ich VERGAß ZU SAGEN, ich MÖCHTE DIE FUNKTIONALITÄT, SO DASS ich VERWENDEN KÖNNEN SEKUNDEN ZU MINUTEN & SEKUNDEN

Ein die Reagieren, Dokumentation, Beispiele ist eine Uhr, die sich selbst aktualisiert, wie es scheint, wäre ziemlich hilfreich...
es ist halb hilfreich. Sie sind immer nur eine Zeit aber, als können es durch componentDidMount während ich nur extrahieren möchten Sekunden und Minuten von einem Start-position..
Vielleicht könnte man ein runnable minimale reproduzierbare Beispiel in der Frage über Stapel-Snippets, die Unterstützung Reagieren und JSX, so konnten wir sehen, das problem in Aktion.
finde es sehr schwierig, eines zu erstellen in JSfiddle wie ich bin mit vielen Komponenten mit vielen Requisiten in vielen Dateien
von der Frage, was macht Sinn für Sie? (um zu sehen, ob ich hinzufügen können, mehr wissen um die Dinge erklärt, die weniger gut)
sorry für den spam. Was ich brauche, mehr ist ein Weg, um zu konvertieren Sekunden Sekunden/Minuten z.B. 10 -> 00:10 oder 65 -> 01:05, reagieren. im Grunde ein schöner Weg, um zu formatieren, meine Stand

InformationsquelleAutor The worm | 2016-11-30

35

Müssen Sie setState jede Sekunde mit den verbleibenden Sekunden (jedes mal, wenn das Intervall aufgerufen wird). Hier ist ein Beispiel:

JS:
```
class Example extends React.Component {
  constructor() {
    super();
    this.state = { time: {}, seconds: 5 };
    this.timer = 0;
    this.startTimer = this.startTimer.bind(this);
    this.countDown = this.countDown.bind(this);
  }

  secondsToTime(secs){
    let hours = Math.floor(secs / (60 * 60));

    let divisor_for_minutes = secs % (60 * 60);
    let minutes = Math.floor(divisor_for_minutes / 60);

    let divisor_for_seconds = divisor_for_minutes % 60;
    let seconds = Math.ceil(divisor_for_seconds);

    let obj = {
      "h": hours,
      "m": minutes,
      "s": seconds
    };
    return obj;
  }

  componentDidMount() {
    let timeLeftVar = this.secondsToTime(this.state.seconds);
    this.setState({ time: timeLeftVar });
  }

  startTimer() {
    if (this.timer == 0 && this.state.seconds > 0) {
      this.timer = setInterval(this.countDown, 1000);
    }
  }

  countDown() {
    //Remove one second, set state so a re-render happens.
    let seconds = this.state.seconds - 1;
    this.setState({
      time: this.secondsToTime(seconds),
      seconds: seconds,
    });
    
    //Check if we're at zero.
    if (seconds == 0) { 
      clearInterval(this.timer);
    }
  }

  render() {
    return(
      <div>
        <button onClick={this.startTimer}>Start</button>
        m: {this.state.time.m} s: {this.state.time.s}
      </div>
    );
  }
}

ReactDOM.render(<Example/>, document.getElementById('View'));
```
HTML:
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="View"></div>
```
- das sieht gut aus.ein problem ist, dass es halt nicht bei 0 und geht bis minus wenn? Korrektur, und ich werde es akzeptieren 😉
- Nun, es ist ähnlich zu dem, was Sie hatten in Ihrem ursprünglichen code. Überprüfen Sie, ob es irgendwelche Sekunden nach Links und dann tun clearInterval. Aktualisiert meine Antwort.
- Sie könnte auch tun, viel mehr Optimierungen, wie das zurücksetzen des Timers, anhalten, etc., aber die Frage richtete sich an wie ein count-down und reflektieren, die in der render.
- prost, meins ist immer noch in minus für einige seltsame Grund. Ich selbst Konsole.angemeldet(Sekunden) und es zeigte mir, dass es 0, so wird zu Debuggen weiter
- in der Tat wurde Sie sogar in das Teil, aber klar-Intervall nicht scheinen, etwas zu tun, wissen Sie, warum?
- Ist Ihre timer-Objekt in den Zustand? Versuchen Sie es, wie ich.
- yeh, die ich habe, denke ich. und ja, es ist in dem Staat an der Spitze.
- Versuchen Sie es als Globale variable, nicht Staat (this.timer = 0;)
- globals Durcheinander, aber Sie nicht 🙁
- habe das problem gefunden!
- Ihre Lösung war genial. Es war wirklich hilfreich für mich zu bauen, mein count-down-timer-Komponente und, um loszulegen. Der code war sehr sauber. Halten Sie die große Arbeit !
- Bedenken Sie, dass, wenn die Komponente ausgehängt, bevor der timer fertig ist, wird eine Warnmeldung angezeigt, die sagen, dass keine this.setState genannt werden kann, auf einer nicht gemounteten Objekt. Um dies zu vermeiden, sollten Sie componentWillUnmount(){ clearInterval(this.timer) } Ihrer Komponente
- Ja, das ist sehr wahr! Ließ es sich hier der Einfachheit halber.
- die setInterval-Funktion kann eine Verzögerung, die wahrscheinlich variieren per Telefon, ich habe gesehen, dass dies manchmal bis zu 30 Sekunden aus. developer.mozilla.org/en-US/docs/Web/API/... anstatt sich so etwas anschaut dbaron.org/log/20100309-faster-timeouts
- Einen weiteren Kommentar zu der countDown-Methode: Wenn Sie den vorherigen Zustand zu berechnen weiter (was der Fall ist), sollten Sie setState der erhält eine Funktion, die previousState als argument und gibt das newState: dies.setState(prevState => calculateNextState(prevState));
InformationsquelleAutor Fabian Schultz

JS:

class Example extends React.Component {
  constructor() {
    super();
    this.state = { time: {}, seconds: 5 };
    this.timer = 0;
    this.startTimer = this.startTimer.bind(this);
    this.countDown = this.countDown.bind(this);
  }

  secondsToTime(secs){
    let hours = Math.floor(secs / (60 * 60));

    let divisor_for_minutes = secs % (60 * 60);
    let minutes = Math.floor(divisor_for_minutes / 60);

    let divisor_for_seconds = divisor_for_minutes % 60;
    let seconds = Math.ceil(divisor_for_seconds);

    let obj = {
      "h": hours,
      "m": minutes,
      "s": seconds
    };
    return obj;
  }

  componentDidMount() {
    let timeLeftVar = this.secondsToTime(this.state.seconds);
    this.setState({ time: timeLeftVar });
  }

  startTimer() {
    if (this.timer == 0 && this.state.seconds > 0) {
      this.timer = setInterval(this.countDown, 1000);
    }
  }

  countDown() {
    //Remove one second, set state so a re-render happens.
    let seconds = this.state.seconds - 1;
    this.setState({
      time: this.secondsToTime(seconds),
      seconds: seconds,
    });
    
    //Check if we're at zero.
    if (seconds == 0) { 
      clearInterval(this.timer);
    }
  }

  render() {
    return(
      <div>
        <button onClick={this.startTimer}>Start</button>
        m: {this.state.time.m} s: {this.state.time.s}
      </div>
    );
  }
}

ReactDOM.render(<Example/>, document.getElementById('View'));

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="View"></div>

InformationsquelleAutor Ankit Verma

1

Das problem ist in Ihrem "das" - Wert.
Timer-Funktion kann nicht auf die "Staatliche" Stütze, da die Ausführung in einem anderen Kontext. Ich schlage vor, Sie tun so etwas wie dieses:
```
...
startTimer = () => {
  let interval = setInterval(this.timer.bind(this), 1000);
  this.setState({ interval });
};
```
Wie Sie sehen können habe ich eine "bind" - Methode, um Ihre timer-Funktion. Dies ermöglicht es dem timer, wenn Sie aufgerufen, um auf die gleiche "das" von Ihr reagieren Komponente (Dies ist das primäre problem/Verbesserung, wenn die Arbeit mit javascript im Allgemeinen).

Weitere option ist die Verwendung einer anderen Pfeil-Funktion:
```
startTimer = () => {
  let interval = setInterval(() => this.timer(), 1000);
  this.setState({ interval });
};
```
- Gut gesichtet! ....
- ah ja, das habe ich vergessen zu binden. dies löst nicht mein Hauptproblem es keinen Countdown, obwohl?
InformationsquelleAutor Roberto Conte Rosito

Der einzige Nachteil mit setInterval ist, dass es verlangsamt den Haupt-thread. Sie können eine countdown-timer mit requestAnimationFrame statt, um dies zu verhindern. Dies ist ein Beispiel für meine generic countdown timer-Komponente:

class Timer extends Component {
  constructor(props) {
    super(props)
    //here, getTimeRemaining is a helper function that returns an 
    //object with { total, seconds, minutes, hours, days }
    this.state = { timeLeft: getTimeRemaining(props.expiresAt) }
  }

  //Wait until the component has mounted to start the animation frame
  componentDidMount() {
    this.start()
  }

  //Clean up by cancelling any animation frame previously scheduled
  componentWillUnmount() {
    this.stop()
  }

  start = () => {
    this.frameId = requestAnimationFrame(this.tick)
  }

  tick = () => {
    const timeLeft = getTimeRemaining(this.props.expiresAt)
    if (timeLeft.total <= 0) {
      this.stop()
      //...any other actions to do on expiration
    } else {
      this.setState(
        { timeLeft },
        () => this.frameId = requestAnimationFrame(this.tick)
      )
    }
  }

  stop = () => {
    cancelAnimationFrame(this.frameId)
  }

  render() {...}
}

Schön! Aber ich denke, man kann optimieren, indem Sie verhindern, zu viele render. Sie müssen nicht setState (und rerender) jedes frame (~30 pro sec). Sie konnte setState nur, wenn timeLeft (in Sekunden) verpasst. Und vielleicht verwenden Sie shouldComponentUpdate ? Bin ich im Recht ?

InformationsquelleAutor Sia

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.