设置超时和 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 毫秒内，所有设置超时几乎将背靠背触发。您可以使用 setInterval，也可以重写它以使用基于某些条件的递归循环。