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

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 );

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

How to correctly use setInterval for multiple functions being called repeatedly in React Native

timer

setinterval

react-native

use-effect