将元素添加到数组并从前面删除元素，一次一个，每 2 秒一次，直到数组为空？

Question

所以，我正在使用 react 并有一个按钮，当我按下按钮时，它使用 useState 将元素添加到数组中。现在，一旦我添加了第一个元素，我想在每 1 秒后删除第一个元素，直到数组为空并且我不再按下按钮。

我可以继续按下并添加项目，但在 2 秒过去后，可能使用计时器，它也应该继续从数组的前面移除。

const [id, addId] = useState([])

<button onClick={()=> addId([...id,newId])> Add Id </button> 

所以，我有一个循环遍历 ID 并将它们绘制在屏幕上的视图。现在，当它被绘制时，它应该会消失，并且在我第一次按下按钮并每 2 秒将其移除后，它也会从阵列中移除。

我无法正确使用 setInterval、setTimeout 和 useEffect。它最终陷入无限循环......

假设我按了 3 次，数组将是 [1,2,3]，1 秒后，它应该是 [2,3]，然后 1 秒后，它应该是 [3]，最后停止一个空数组 []。一旦我按下按钮，即使我停止按下按钮，删除过程也不应该停止，直到数组为空。

希望现在清楚我想要什么

Answer 1

您可以使用setInterval 并检查数组是否有值。

function add() {
    array.push(Math.floor(Math.random() * 10));
    document.getElementById('values').innerHTML = array.join(' ');
}

const array = [];

setInterval(() => {
    if (!array.length) return;
    array.shift();
    document.getElementById('values').innerHTML = array.join(' ');
}, 1000);

<button onclick="add()">click</button><br>
<div id="values"></div>

一种稍微好一点的方法，仅当数组中至少有一个值时，间隔才会循环。

function showValues() {
    document.getElementById('values').innerHTML = array.join(' ');
}

function add() {
    array.push(Math.floor(Math.random() * 10));
    showValues();
    if (interval === undefined) interval = setInterval(intervalFn, 1000);
}

function intervalFn() {
    array.shift();
    showValues();
    if (!array.length) {
        clearInterval(interval);
        interval = undefined;
    }
}

let array = [],
    interval;

<button onclick="add()">click</button><br>
<div id="values"></div>

Answer 2

const interval = null;

const Component = () => {

    const [array, setArray] = useState([]);

    useEffect(() =>  

         if (interval === null) {
              interval = setInterval(() => {
                   if (array.length > 0) {
                     const [first, ...newArray] = array;
                     setArray(newArray);
                   }

              }, 1000);
         }

        () => clearInterval(interval)
     ), []);

   return ( put code that you want to render );
}

在组件外部初始化间隔变量，因此如果组件中发生任何重新渲染，它不会改变。在组件中确实安装了（使用效果）设置交互，它将每秒触发并从数组中删除元素（移位或弹出）并更新状态。并在卸载时清除间隔。

Answer 3

这是我的尝试，虽然它可能比我想要的有点混乱：

（编辑：这是基于代码和框链接顺便说一句。）

import React from "react";
import "./styles.css";

export default function App() {
  const delay = 2000;
  const [ids, setIds] = React.useState([]);

  const timeout = React.useRef(null);
  const ids_length = React.useRef(null);

  function set_remove_ids_timeout() {
    if(timeout.current)
      clearTimeout(timeout.current);
    
    timeout.current = setTimeout(() => {
      if (ids_length.current === 0) return;
      ids_length.current = ids_length.current - 1;
      setIds(([first, ...others]) => [...others]);
      set_remove_ids_timeout();
    }, delay);
  }

  function add() {
    ids_length.current = ids.length + 1;
    setIds([...ids, (ids[ids.length - 1] || 0) + 1]);
    set_remove_ids_timeout();
  }

  React.useEffect(() => {
    return () => { if(timeout.current) clearTimeout(timeout.current); };
  }, []);

  console.log("ids adding", ids);
  return (
    <div className="App">
      <button onClick={add}> Add Id </button>
      {ids.map((i) => (
        <p key={i}>{i}</p>
      ))}
    </div>
  );
}

编辑...所以我可能没有/不明白在单击按钮后何时恢复删除...所以如果按钮单击不应该影响删除延迟，也许这样的事情会起作用：

import React from "react";
import "./styles.css";

export default function App() {
  const delay = 2000;
  const [ids, setIds] = React.useState([]);

  const interval = React.useRef(null);
  const ids_length = React.useRef(null);

  function set_remove_ids_interval() {
    if (!interval.current) {
      interval.current = setInterval(() => {
        console.log("ids_length.current", ids_length.current);
        if (ids_length.current === 0) {
          clearInterval(interval.current);
          interval.current = null;
          return;
        }
        ids_length.current = ids_length.current - 1;
        setIds(([first, ...others]) => [...others]);
        set_remove_ids_interval();
      }, delay);
    }
  }

  function add() {
    ids_length.current = ids.length + 1;
    setIds([...ids, (ids[ids.length - 1] || 0) + 1]);
    set_remove_ids_interval();
  }

  React.useEffect(() => {
    return () => {
      if (interval.current) clearInterval(interval.current);
    };
  }, []);

  console.log("ids adding", ids);
  return (
    <div className="App">
      <button onClick={add}> Add Id </button>
      {ids.map((i) => (
        <p key={i}>{i}</p>
      ))}
    </div>
  );
}