第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

反應倒數(shù)計時器不準確

反應倒數(shù)計時器不準確

侃侃無極 2022-12-02 17:09:00
初學者在這里。我正在嘗試制作一個從 3 到 0 的倒數(shù)計時器。該應用程序?qū)⒚霐?shù)呈現(xiàn)到屏幕上,但速度非???。我嘗試更改時間間隔,但它似乎不再使時間準確。我不知道出了什么問題。任何幫助表示贊賞。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條經(jīng)驗 獲得超3個贊

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

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

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

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條經(jīng)驗 獲得超6個贊

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


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 關(guān)注
  • 95 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號