如何在应用延迟前使setInterval运行一次回调函数
如何在应用延迟前使setInterval运行一次回调函数
提问于 2019-04-30 11:30:43
我正在运行setInterval中的useEffect钩子来循环一个函数，但是，在应用延迟(间隔)之前，我希望能够先运行该函数一次。在应用延迟之前，我可以在useEffect钩子中运行一次函数吗？
在setInterval函数之前，我尝试过在钩子中运行一次函数，但是它没有给我希望的结果。在useEffect钩子之外运行函数也是如此。
const myText = props.text;
const textTimeout = 100;
const funTextInterval = textTimeout * myText.length
const [quickText, setQuickText] = useState([]);
const setDelay = (i) => {
setTimeout(() => {
myFunction();
, textTimeout * i);
};
useEffect(() => {
setInterval(() => {
for (let i = 0; i < myText.length + 1; i++) {
setDelay(i);
}
}, funTextInterval);
}, []);我希望forloop在setInterval启动延迟之前运行一次，但是延迟发生在forloop之前。
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-04-30 11:45:27
在一个方法中取出for-循环逻辑，并在setInterval和setInterval内部调用它。
const myText = props.text;
const textTimeout = 100;
const funTextInterval = textTimeout * myText.length
const [quickText, setQuickText] = useState([]);
const setDelay = (i) => {
setTimeout(() => {
myFunction();
, textTimeout * i);
};
useEffect(() => {
const loop = () => {
for (let i = 0; i < myText.length + 1; i++) {
setDelay(i);
}
}
loop();
setInterval(() => {
loop();
}, funTextInterval);
}, []);Stack Overflow用户
发布于 2019-04-30 11:41:10
你可以像这样分开你的逻辑：
const myText = props.text;
const textTimeout = 100;
const funTextInterval = textTimeout * myText.length
const [quickText, setQuickText] = useState([]);
function applyTextEffect() {
for (let i = 0; i < myText.length + 1; i++) {
setTimeout(myFunction, textTimeout * i);
}
}
useEffect(() => {
applyTextEffect() // call it here immediately to get the effect you want.
setInterval(applyTextEffect, funTextInterval);
}, []);但请注意，此组件将通过在每次更新时调用文本效果函数来创建不需要的效果。UseEffect在每个更新中都能工作。最好有一个isMounted状态变量，并在它周围实现逻辑，只应用效果一次。
编辑:存储从setInterval函数返回的间隔id并在返回useEffect时清除它也是明智的。否则，当您的组件将要被销毁时，您将得到异常
Stack Overflow用户
发布于 2019-04-30 11:42:22
只使用for循环编写单独的函数。
在调用useEffect()之前调用该函数。
在useEffect() -> setInterval()内部调用新方法。
未经测试的代码如下所示，以作说明。
const myText = props.text;
const textTimeout = 100;
const funTextInterval = textTimeout * myText.length
const [quickText, setQuickText] = useState([]);
const setDelay = (i) => {
setTimeout(() => {
myFunction();
, textTimeout * i);
};
runloop(){
for (let i = 0; i < myText.length + 1; i++) {
setDelay(i);
}
}
useEffect(() => {
setInterval(() => {
runloop()
}, funTextInterval);
}, []);
runloop();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55919971
复制相关文章
相似问题
腾讯云开发者
