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

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

無(wú)法清除本機(jī)應(yīng)用程序中的 setInterval

無(wú)法清除本機(jī)應(yīng)用程序中的 setInterval

郎朗坤 2023-05-18 09:48:59
我有這個(gè)非常簡(jiǎn)單的應(yīng)用程序,我試圖在其中實(shí)現(xiàn)倒計(jì)時(shí),Start并且Stop功能似乎運(yùn)行良好但是當(dāng)我按下時(shí)Stop,值seconds在視圖中沒(méi)有更新,這是期望的行為但是當(dāng)我觀察控制臺(tái)日志時(shí),它顯示sec我猜不斷變化的價(jià)值表明它setInterval仍在運(yùn)行并且沒(méi)有被清除。這是附帶的代碼:import React, { useState, useEffect } from "react";import {  StyleSheet,  Text,  View,  StatusBar,  TouchableOpacity,  Dimensions,} from "react-native";const screen = Dimensions.get("screen");export default function App() {  const [seconds, setSeconds] = useState(4);  const [start, setStartToggle] = useState(true);  let [fun, setFun] = useState(null);  const getRemaining = () => {    const minute = Math.floor(seconds / 60);    const second = seconds - minute * 60;    return formatTime(minute) + ":" + formatTime(second);  };  const formatTime = (time) => {    return ("0" + time).slice(-2);  };  const startTimer = () => {    setStartToggle(false);    console.log("StartTimer");    let sec = seconds;    setFun(      setInterval(() => {        console.log("akak:", sec);        if (sec <= 0) stopTimer();        setSeconds(sec--);      }, 1000)    );  };  const stopTimer = () => {    setStartToggle(true);    console.log("StopTimer");    clearInterval(fun);    setFun(null);  };  return (    <View style={styles.container}>      <StatusBar barStyle="light-content" />      <Text style={styles.timerText}>{getRemaining(seconds)}</Text>      {start ? (        <TouchableOpacity onPress={startTimer} style={styles.button}>          <Text style={styles.buttonText}>Start</Text>        </TouchableOpacity>      ) : (        <TouchableOpacity          onPress={stopTimer}          style={[styles.button, { borderColor: "orange" }]}        >          <Text style={styles.buttonText}>Stop</Text>        </TouchableOpacity>      )}    </View>  );}const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: "#07121B",    alignItems: "center",    justifyContent: "center",  },應(yīng)用行為:https://i.stack.imgur.com/fzdj6.gif 即使在點(diǎn)擊停止后也會(huì)顯示輸出:https://i.stack.imgur.com/Ug0aJ.gif
查看完整描述

2 回答

?
白衣非少年

TA貢獻(xiàn)1155條經(jīng)驗(yàn) 獲得超0個(gè)贊

目前您使用useState掛鉤來(lái)存儲(chǔ)區(qū)間參考。在每次重新渲染組件時(shí),App狀態(tài)fun都會(huì)被重置,但不會(huì)是對(duì)間隔的完全相同的引用。


而是使用useRef鉤子。它可以創(chuàng)建對(duì)間隔的引用,該間隔在重新渲染期間不會(huì)更改。這意味著引用屬性中的值current將始終完全相同。


最重要的是,使用useEffect鉤子來(lái)觀察何時(shí)設(shè)置或取消設(shè)置運(yùn)行狀態(tài),并根據(jù)該狀態(tài)啟動(dòng)和停止計(jì)時(shí)器。


import React, { useState, useRef, useEffect } from 'react'


export default function App() {

  const [isRunning, setIsRunning] = useState(false);

  const funRef = useRef(null);


  const startTimer = () => {

    if (!isRunning) {

      setIsRunning(true);

    }

  };


  const stopTimer = () {

    if (isRunning && funRef.current !== null) {

      setIsRunning(false);

    }

  };


  useEffect(() => {

    if (isRunning) {

      funRef.current = setInterval(() => { // Save reference to interval.

        // ...

      }, 1000);

    } else {

      clearInterval(funRef.current); // Stop the interval.

    }

  }, [isRunning]);


  // ...

}


查看完整回答
反對(duì) 回復(fù) 2023-05-18
?
尚方寶劍之說(shuō)

TA貢獻(xiàn)1788條經(jīng)驗(yàn) 獲得超4個(gè)贊

在 useEffect 塊中添加間隔計(jì)時(shí)器,并在每次開(kāi)始更改時(shí)運(yùn)行此塊:


  useEffect(()=> {

        let timer = null;

    

        if(!start) {

          let sec = seconds;

          timer = setInterval(() => {

            console.log("akak:", sec);

            if (sec <= 0) clearInterval(timer);

            setSeconds(sec--);

          }, 1000);

        } else {

          clearInterval(timer);

       }

   }, [start]);



      const startTimer = () => {

        setStartToggle(false);

      };



      const stopTimer = () => {

        setStartToggle(true);

      };

另外,我建議您使用確切的剩余時(shí)間。Javascript 是單線程語(yǔ)言,這個(gè)間隔可能超過(guò)一秒


編輯:使用確切的時(shí)間。


  useEffect(() => {

    let timer = null;


    if (!start) {

      let sec = seconds;

      const startTime = Date.now();

      timer = setInterval(() => {

        const currentTime = Date.now();

        sec = sec - Math.floor((currentTime - startTime) / 1000);

        if (sec < 0) {

          clearInterval(timer);

          setSeconds(0);

        } else {

          setSeconds(sec);

        }

      }, 1000);

    }

  }, [start]);


查看完整回答
反對(duì) 回復(fù) 2023-05-18
  • 2 回答
  • 0 關(guān)注
  • 165 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

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