React Native - 当array.length.current == 0或数组变为空时重置setInterval持续时间

Posted 2023-03-17

【中文标题】React Native - 当array.length.current == 0或数组变为空时重置setInterval持续时间

【英文标题】：React Native - Resetting setInterval duration when array.length.current == 0 or when array becomes empty

【发布时间】：2022-01-21 18:56:18

【问题描述】：

我有一个函数，可以将数字添加到数组中，然后播放数字的声音，然后在以称为“延迟”的间隔播放后删除数字。但是，我无法确定将延迟重置回 0 的位置。也就是说 - 当所有数字都被播放并从数组中删除时。这样做的重点是，总是会立即播放第一个添加的数字（延迟为 0 秒），而之后添加的数字将以 4 秒的间隔播放和删除。我花了很多时间来解决这个问题，但是谁能弄清楚在哪里将延迟重置回 0，以便当数组为空时，总是会立即播放第一个添加的数字？请记住，如果您继续添加数字，则数字会以 4 秒的间隔等待播放，就像声音队列一样。

const [arr, setArr] = React.useState([]); //Sound queue array
const interval = React.useRef(null);
const arr_length = React.useRef(null);
const [delay, setDelay] = useState(0);

function set_remove_arr_interval(num) 

setArr((currentNumbers) => [...currentNumbers, num]);
if (!interval.current) 

  interval.current = setInterval(() => 
    // Sets an ongoing interval for the sound queue
    console.log("Array current position: " + arr_length.current);

    if (arr_length.current > 0) 
      playSound(arr[0][0], arr[0][1], arr[0][2]);
      setDelay(4000); //My delay duration at 4 seconds
    

    if (arr_length.current === 0) 
      // setDelay(0); // <-- I tried resetting the delay duration here to 0 but it resets to 0 every time a number is entered immediately and plays it, which is not what I want.
      clearInterval(interval.current);
      interval.current = null;
      return;
    
    arr_length.current = arr_length.current - 1;

    setArr((currentNumbers) => [...currentNumbers.slice(1)]);

  , delay);

 



function add(num) 
arr_length.current = arr.length + 1;
set_remove_arr_interval(num);

编辑：我也尝试初始化一个名为 isFirst 的新变量，但它只在间隔的交替时间起作用：

    const [isFirst, setIsFirst] = useState(true);

    if (isFirst == false && arr_length.current == 0) 
      setDelay(0);
      setIsFirst(true);
    

    if (arr_length.current > 0) 
      playSound(arr[0][0], arr[0][1], arr[0][2]);
      if (isFirst == true) 
        setDelay(4000);
        setIsFirst(false);
      
    

【问题讨论】：

为了澄清这个问题，我希望在 arr_length.current 从 1 变为 0 时将延迟持续时间重置为 0。

【参考方案1】：

我现在解决了这个问题，只需在数组长度为 1 时使用 useState 挂钩将延迟重置回 0。还有比这更好的解决方案吗？因为我认为不鼓励在函数内部使用钩子，而且我还发现有时 console.logging 它们不会在更改时记录新状态。

sound.setOnPlaybackStatusUpdate(async (status) => 
      if (status.didJustFinish === true) 
        const  sound  = await Audio.Sound.createAsync(data[0], 
          shouldPlay: true,
        );
        setSound(sound);
        await sound.playAsync();
        if (arr.length == 1) 
          setDelay(0);
        
      
    );