如何运行一系列倒计时

Question

我正试图从一个数组中运行多次倒计数，例如[11，12，13，14，15，16]。我想实现的是，第一次将倒计时时间设置为11，当它达到0时，计时器设置为12，然后倒计时到0。之后，重置为13并倒计时，然后重置为14并倒计时等。

但是，我的代码只能从11倒计时到0，然后停止。For循环似乎不起作用，并且从未将第二项12放入计时器。后来我发现，这是因为循环内部的retun将其从循环外部打断。我想知道是否有一些聪明的方法可以避免For循环中的返回？或者，如何在For循环中使用Return而不脱离循环？

(我在那里有另一个计数器叫TotalTime，我想计算它所花费的所有总时间，即11+12+13+14等(

计时器和显示屏：

import {View, Text, StyleSheet, FlatList} from 'react-native';
import PlaySounds from './PlaySounds';
const CustomTimer = ({time, length}) => {
  const [seconds, setSeconds] = useState(time);
  const [totalTime, setTotalTime] = useState(0);
      
  useEffect(() => {   
    if (seconds > 0 ) 
       { const interval = setInterval(() => {
          setSeconds(seconds => seconds - 1);
          setTotalTime(seconds=>seconds + 1)
        }, 1000);
        return () => clearInterval(interval);
      }}, [seconds])
     
    return (
       <View>
         <Text style={{fontSize:20}}> Count Down: {seconds} sec</Text>
         <Text style={{fontSize:20}}> Total Time: {totalTime} sec</Text>
       </View>
    )}
export default CustomTimer;

=====================
import React, {useEffect, useState} from 'react';
import {SafeAreaView,View,Button,ScrollView, Text, StyleSheet} from 'react-native';
import CustomTimer from '../component/CustomTimer';
const BrewScreen = () => {
    const timeArray= [11, 12, 13, 14, 15, 16]
    const length = timeArray.length
   
    const countDownArray=() =>{
    for (let i=0; i<length; i++) {
      return(<CustomTimer time={timeArray[i]} length={length}/>)
      }
    }
   
   
    return (
        <>
        <ScrollView>
          {countDownArray()}
        </ScrollView>
        </>
    )
}

Answer 1

问题似乎是返回到for循环内部。

这意味着在countDownArray函数中for循环的第一次迭代期间，您将返回Timer元素。执行此操作时，函数将退出，因此循环将不会继续。

相反，你需要一种不同的方式来创建Timer元素，以实现你想要的行为。这可能需要Timer元素中的回调函数。这可用于更新BrewScreen的状态，并更新显示的计时器。

Answer 2

我最终解决了它，不是使用循环，而是使用强大的useEffect:

const CustomTimer = ({time}) => {
  
  
  const [seconds, setSeconds] = useState(time[0]);
  const [count, setCount] = useState(1)
  const [totalTime, setTotalTime] = useState(0);
  
  useEffect(() => {
    if (seconds >= 0 ) 
       { const interval = setInterval(() => {
         setSeconds(seconds => seconds - 1);
         setTotalTime(seconds=> seconds + 1)
         console.log('seconds ', seconds, ' totalTime ', totalTime)
        }, 1000);
        return () => clearInterval(interval);}
      else if (count<(time.length)) { 
        setCount(count => count+1)
        setSeconds(time[count])}
      else return
    } 
      )
  
    return (
       <View>
         <Text style={{fontSize:20}}> Count Down: {seconds} sec</Text>
         <Text style={{fontSize:20}}> Total Time: {totalTime} sec</Text>
         {seconds===3?<PlaySounds/>:null}
       </View>
    )}

1. 在For循环中有Return将脱离循环
2. JS将一次性执行所有i，因此您需要添加带有Async/Await对的Promise
3. Return不会中断ForEach循环
4. 但是，Async在ForEach循环中不起作用
5. useEffect在时间间隔的适当支持下自动运行循环
6. 在我想要运行倒计时的情况下，setInterval必须优先于setCountDown，因为setInterval会在您指定的每毫秒更新一次
7. 记住使用clearInterval清理间隔
8. 有一件事我不明白：count的初始值必须是1，而不是0。第一次读取计数时，它似乎被强制设置为初始值。如果我将它初始化为0，数组中的第一个数字将被执行两次
9. 此外，倒数中显示的最终数字是-1……我知道这是因为useEffect就是这样停止的，但我想知道如何避免显示负数