SetTimeout 和 For 循环

Question

我的问题：想在 1 秒后显示每个字母，但我没有立即显示所有字母。 我已经尝试了很多方法来做到这一点，但仍然不能。

我的代码：

const [parrot, setParrot] = useState({ content: ' ' });

const displayText = () => {
    let text = 'Parrot';
    let freeLetters = [...text];
    let sumOfLetters = [];

    for (let k = 0; k < freeLetters.length; k++) {
        (function() {
            let j = k;
            setTimeout(() => {
                sumOfLetters.push(freeLetters[j]);
                console.log(sumOfLetters);
                setParrot({
                    content: sumOfLetters.join(' ')
                });
                console.log(parrot.content);
            }, 1000);
        })();
    }
};
   return (
    <div className={classes.contentwrapper}>
        <h1 onClick={() => displayText()}>Click me, {parrot.content}</h1>
    </div>
);

Answer 1

您的超时都设置为 1000 毫秒，您应该将超时乘以循环的当前索引。

您需要做的是在循环的每次迭代中增加 setTimeout 等待值。 请参阅下面的工作示例。

const [parrot, setParrot] = useState({ content: ' ' });

const displayText = () => {
    let text = 'Parrot';
    let freeLetters = [...text];
    let sumOfLetters = [];

    for (let k = 0; k < freeLetters.length; k++) {
        (function() {
            let j = k;
            setTimeout(() => {
                sumOfLetters.push(freeLetters[j]);
                console.log(sumOfLetters);
                setParrot({
                    content: sumOfLetters.join(' ')
                });
                console.log(parrot.content);
            }, 1000 * (j + 1));
            // j + 1 because the loop starts at 0. 
            // For the second iteration this will be 2000 ms
            // For the third, 3000 ms
            // Etc.
        })();
    }
};
   return (
    <div className={classes.contentwrapper}>
        <h1 onClick={() => displayText()}>Click me, {parrot.content}</h1>
    </div>
);

Answer 2

你的循环只是触发一个函数，它说在 1000 毫秒内做某事。 循环将继续迭代，直到条件满足，然后在您的 1000 毫秒内，所有 setTimeouts 几乎都会触发。 您可以使用 setInterval 或重写它以使用基于某些条件的递归循环。