亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

反應倒數計時器不準確

反應倒數計時器不準確

侃侃無極 2022-12-02 17:09:00
初學者在這里。我正在嘗試制作一個從 3 到 0 的倒數計時器。該應用程序將秒數呈現到屏幕上,但速度非???。我嘗試更改時間間隔,但它似乎不再使時間準確。我不知道出了什么問題。任何幫助表示贊賞。import React from "react";export default class Timer extends React.Component {    constructor(){        super();        this.state = {            time: 3,        }        this.countdown = this.countdown.bind(this);        this.timer = this.timer.bind(this)    }    timer(){                let interval = setInterval(() => this.countdown(interval),1000)                return this.state.time    }    countdown(t){        if(this.state.time == null)        {            console.log("NULL")        }        let myTime = this.state.time                if(myTime > 0) {            myTime--;            this.setState({time: myTime})            console.log(myTime)        } else {            clearInterval(t)        }        return myTime;    }    render() {      return (        <div id = "Timer">          <p>              {this.timer()}          </p>           </div>              );    }  }
查看完整描述

2 回答

?
子衿沉夜

TA貢獻1828條經驗 獲得超3個贊

第一個評論您帖子的用戶是對的。但讓我澄清一下。

這就是我認為正在發生的事情。組件第一次呈現時執行 timer() 方法,該方法設置計時器間隔。第一秒后,執行間隔回調,這會更改組件狀態,并反應安排重新渲染您的組件。然后,組件重新渲染自己,并在設置新間隔的第 2 秒(請原諒這個多余的短語)之前再次執行 timer() 函數。這種情況會發生,直到您清除間隔,這是您的代碼設置的最后一個間隔。這就是為什么您注意到可變時間的值變化異??斓脑?。

你應該做這樣的事情:(這是你的相同代碼,有一些變化,可能對你理解更有用。然后你可以給出你自己的風格或個人風格)

import React from "react";


export default class Timer extends React.Component {


constructor(){

    super();


    this.state = {

        time: 3,

    }


    this.countdown = this.countdown.bind(this);

    this.timer = this.timer.bind(this)

}


componentDidMount() {

  this.interval = setInterval(() => 

    this.countdown(interval),1000

  );

}


componentWillUnmount() {

  if (this.interval) {

     clearInterval(this.interval);

  }

}


countdown(){

    if(this.state.time == null)

    {

        console.log("NULL")

    }

    let myTime = this.state.time

    

    if(myTime > 0) {

        myTime--;

        this.setState({time: myTime})

        console.log(myTime)

    } else {

        clearInterval(this.interval)

    }


    return myTime;

}


render() {

  return (

    <div id = "Timer">

      <p>

          {this.state.time}

      </p>

    </div>

  );

}

}

干杯!


查看完整回答
反對 回復 2022-12-02
?
搖曳的薔薇

TA貢獻1793條經驗 獲得超6個贊

我會componentDidMount在這里開始間隔。您只想創建一次間隔,然后在它完成倒計時或組件在計時器達到 0 之前卸載時清理它。您可以在此基礎上構建額外的功能來執行停止/重新啟動等操作......等等


export default class Timer extends React.Component {

  state = {

    time: this.props.start || 3

  };

  options = {

    interval: this.props.interval || 1000

    step: this.props.step || 1

  };

  interval = null;


  componentDidMount() {

    this.countdown()

  }

  componentWillUnmount() {

    clearInterval(this.interval)

  }

  tick = () => {

    this.setState(

      ({ time }) => ({ time: time - this.options.step }),

      () => {

        if (this.state.time === 0) {

          clearInterval(this.interval);

        }

      }

    );

  }

  countdown = () => {

    this.interval = setInterval(this.tick, this.options.interval);

  }


  render() {

    return (

      <div id="Timer">

        <p>{this.state.time}</p>

      </div>

    );

  }

}

這是一個可以玩的演示:)


查看完整回答
反對 回復 2022-12-02
  • 2 回答
  • 0 關注
  • 91 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號