如何正确使用 setInterval 在 React Native 中重复调用多个函数

Question

我正在使用 React Native 构建一个简单的应用程序，旨在以特定的时间间隔在屏幕上闪烁不同的颜色。我的实现如下：

useEffect(() => {
    var blinkOnValue;
    var blinkOffValue;

    function blinkOn() {
        const colorAndWord = getRandomColor(colorArray);
        setBackground(colorAndWord.color);
    }

    function blinkOff() {
        setBackground('#F3F3F3');
    }

    if (strobeStart) {
        if (on) {
            blinkOnValue = setInterval(() => {
                blinkOn();
                setOn(false);
            }, info.length * 1000);
        } else {
            blinkOffValue = setInterval(() => {
                blinkOff();
                setOn(true);
            }, info.delay * 1000);
        }
    }
    return () => {
        on ? clearInterval(blinkOnValue) : clearInterval(blinkOffValue);
    };
}, [colorArray, info.delay, info.length, on, strobeStart]);

blinkOn 函数将背景设置为某种颜色，而 blinkOff 函数将背景设置为默认的浅灰色。这些功能应该来回交替，以不同的时间间隔闪烁。例如，如果 info.length 为 2，info.delay 为 0.5，则颜色应闪烁 2 秒，然后屏幕应为浅灰色 0.5 秒并重复。但是，无论这两个值是什么，blinkOn 和 blinkOff 的持续时间都是相同的。有时它使用 info.length 中的值，有时它使用 info.delay 中的值，这也很奇怪。

我认为这与正确安装和卸载组件有关，但老实说我很迷茫。如果有人对如何使此代码在适当闪烁的地方始终如一地工作有任何建议，我将不胜感激。

Answer 1

我建议使用单个计时器并根据当前系统时间计算闪烁状态，而不是尝试正确地为您的事件计时。

var oldState = true;

function blink() {
    var ms = new Date().getTime(); 
    var t = ms % (info.delay + info.length);  
    var state = (t < info.length ? true : false);
    if (state == oldState) return;
    if (state) {
        blinkOn();
    }
    else
    {
        blinkOff();
    }
    oldState = state;
}

现在设置一个短定时器来检查时间并根据需要更新闪烁状态：

setInterval( () => blink(), 100 );