Question

我正在useEffect挂钩中运行setInterval以连续运行两个函数，但是，只有第一个函数会循环。我该怎么做才能使第一个功能先运行，然后运行第二个功能？

我什至尝试让两个setInterval函数运行并更改其延迟选项，以尝试模拟所需的连续行为。但是出现故障，很明显我的文字效果有问题。

selectedToggleProperty()

我希望if首先运行，然后group.selectedToggleProperty().addListener((observable, oldValue, newValue) -> { // Set the previously-selected RadioButton text to BLACK if (oldValue != null) ((RadioButton) oldValue).setTextFill(Color.BLACK); // Set the color for the newly-selected RadioButton if (newValue.equals(radio1)) { ((RadioButton) newValue).setTextFill(Color.RED); } else if (newValue.equals(radio2)) { ((RadioButton) newValue).setTextFill(Color.BLUE); } else if (newValue.equals(radio3)) { ((RadioButton) newValue).setTextFill(Color.GREEN); } });之后运行，但是我没有得到效果。

Answer 1

主要问题是，擦除效果的超时延迟比显示效果的最长延迟短。认识到显示的超时和擦除效果都是一次性执行的，因此，如果希望按正确的顺序执行回调（myFunction1，myFunction2），则延迟应继续增加。

这是它如何工作的。注释表示我必须进行更正的地方：

// Extra code to define the functions/variables which you did not provide (ignore it):
const output = document.querySelector("div");
const myFunction1 = () => output.textContent = myText.slice(0, output.textContent.length+1);
const myFunction2 = () => output.textContent = myText.slice(0, output.textContent.length-1);
const props = { text: "This is a test", textDelay: 100 };
const useEffect = (cb) => cb();
const useState = () => [];
const useInterval = setInterval;
// END extra code

const myText = props.text;
const textTimeout = props.textDelay;
const funTextInterval = (textTimeout * myText.length * 2) + 200; // 2 times (show+hide)!
const [quickText, setQuickText] = useState([]);

const displayFunText = (i) => {
    setTimeout(() => {
        myFunction1();
    }, textTimeout * i);
};

const erraseFunText = (j) => {
    setTimeout(() => {
        myFunction2();
    }, textTimeout * j);
};

useEffect(() => {
    const loop = () => {
        for (let i = 0; i < myText.length; i += 1) { // fix end-condition
            displayFunText(i);
        }
    };

    const reverseLoop = () => {
        for (let j = myText.length; j < 2*myText.length; j += 1) { // fix to produce greater values (= delays)
            erraseFunText(j);
        }
    };

    const callLoops = () => { // change order:
        loop();
        reverseLoop();
    };

    callLoops(); // instead of loop()

    const runLoops = useInterval(() => {
        callLoops();
    }, funTextInterval);

    return () => {
        clearInterval(runLoops);
    };
}, []);

<div id="output"></div>

您可能希望研究promise和async函数，这可能使这种异步更易于使用（观点有所不同）。

如何在useEffect挂钩内的setInterval回调中调用两个函数

1 个答案: