Задержка React Hooks при использовании setTimeout с Web Worker - PullRequest
Новая
       29

Задержка React Hooks при использовании setTimeout с Web Worker

0 голосов
/ 10 марта 2019

У меня есть приложение, которое вычисляет множественные различия между 2 и 2 точками времени в течение всего дня.Я использую таймер обратного отсчета, чтобы показать разницу между этими двумя точками.Всякий раз, когда обратный отсчет достигает 00.00.00, приложение запускается с обратным отсчетом следующего вычисления между 2 точками времени.

Поэтому мне нужен таймер обратного отсчета, который работает постоянно, даже если вкладка неактивна.Я обнаружил, что когда текущая вкладка неактивна, setTimeout будет иметь небольшую задержку

Это то, что у меня до сих пор.Я реализовал WebWorker, но кажется, что при переключении вкладок задержка все равно есть.Я регистрирую таймер каждую секунду, поэтому я проверил его, открыв консоль в отдельном окне и переключая вкладки.

Это то, что у меня есть 

import worker    from './worker.js';
import WebWorker from './WebWorker';
const useSetInterval = ({ prayerTime }) => {
    // SET THE STATE OF SECONDS, MINUTES AND HOURS
    const [seconds, setSeconds] = useState(60 - Number(moment().format('ss')));
    const [minutes, setMinutes] = useState(prayerTime.minutes);
    const [hours, setHours]     = useState(prayerTime.hours);

    useEffect(() => {
        const w = new WebWorker(worker);
        w.postMessage({ seconds, minutes, hours }); 

        w.addEventListener('message', e => {
            const { newSeconds, newMinutes, newHours } = e.data;
            setSeconds((newSeconds < 0) ? 59 : newSeconds);
            if (newSeconds < 0)
            {
                setMinutes((newMinutes < 0) ? 59 : newMinutes);
                if (newMinutes < 0) setHours((newHours < 0) ? "Refresh" : newHours); 
            }
        });     

        return () => w.terminate();
    }, [seconds, minutes, hours]);  

    return { seconds, minutes, hours };
};

// Webworker.js
export default class WebWorker {
    constructor(worker) {
        const code = worker.toString();
        const blob = new Blob(['('+code+')()']);
        return new Worker(URL.createObjectURL(blob));
    }
}

// worker.js
export default () => {
    self.addEventListener( "message", (e) => {
        if (!e) return;

        const { seconds, minutes, hours } = e.data;

        setTimeout(() => {
            const newSeconds = seconds - 1;
            const newMinutes = (newSeconds < 0) ? minutes - 1 : minutes;
            const newHours   = (newMinutes < 0) ? hours - 1 : hours;

            postMessage({ newSeconds, newMinutes, newHours });
        }, 1000);
    });
};

У меня установлен тайм-аут в1000 мс, что составляет 1 секунду, и я прочитал, когда вкладка неактивна, таймер задерживается до 1000 мс, но все еще есть задержка.Кто-нибудь может помочь мне в правильном направлении?

1 Ответ

0 голосов
/ 10 марта 2019

Это может быть связано с неточностью setTimeout: В чем причина того, что JavaScript setTimeout такой неточный?

Когда вы вызываете setTimeout, функция добавляется в таблицу событий и выполняется после указанного времени , а затем, когда цикл событий свободен .

...