如何在不中断循环（JS）的情况下在 For 循环中使用 Retun？

Question

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

但是，我的代码只能从 11 倒数到 0，然后停止。 For 循环似乎不起作用，并且永远不会将第二项 12 放入计时器中。 后来我发现这是因为 for 循环内部的 retun 在循环之外破坏了它。 我想知道是否有一些聪明的方法可以避免在 For-Loop 中返回？ 或者，如何在不跳出循环的情况下在 For-Loop 中使用 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 function 中 for 循环的第一次迭代期间，您将返回 Timer 元素。 执行此操作时，function 将退出，因此循环不会继续。

相反，您需要以不同的方式创建 Timer 元素来实现您想要的行为。 这可能需要在 Timer 元素中回调 function。 这可用于更新 BrewScreen 的 state，并更新显示的 Timer。

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 将在一个 go 中执行所有 i，因此您需要使用 Async/Await 对添加 Promise
3. Return 不会破坏 ForEach 循环
4. 但是，异步在 ForEach 循环中不起作用
5. useEffect 在适当的时间间隔支持下自动运行循环
6. 在我想运行倒计时时钟的情况下，setInterval 必须优先于 setCountDown，因为 setInterval 会在您指定的每毫秒更新一次。
7. 记住用 clearInterval 清理你的时间间隔
8. 有一件事我不明白： count 的初始值必须是 1 而不是 0。似乎 count 在第一次读取时被强制为初始值。 如果我将其初始化为 0，则数组中的第一个数字将被执行两次。
9. 此外，Count Down 中显示的最终数字是 -1.... 我知道这是因为这是 useEffect 停止的方式，但想知道如何避免显示负数？