Реакция времени ожидания - PullRequest
0 голосов
/ 24 ноября 2018
updatePixelBuffer(x, y) {
    console.log("cleared from update", this.state.pixelRefreshTimer);
    window.clearTimeout(this.state.pixelRefreshTimer);

    let pixelRefreshTimer = window.setTimeout(() => {
        console.log("from timer", pixelRefreshTimer);
        this.triggerPixelRefresh();
    }, 3000);
    console.log("set timer", pixelRefreshTimer);

    this.setState({
        pixelRefreshTimer: pixelRefreshTimer,
    });

    // store operation in buffer and perform visual draw
}

triggerPixelRefresh() {
    console.log("cleared from refresh", this.state.pixelRefreshTimer);
    window.clearTimeout(this.state.pixelRefreshTimer);

    // update data structure with operations in buffer
}

Большую часть времени updatePixelBuffer вызывается сам по себе несколько раз , так как я использую его для хранения операций рисования, прежде чем обновлять их в пакетном режиме в структуре данных, я разрешаю пользователючтобы визуализировать операции рисования в реальном времени (даже если структура данных еще не обновила их).

Моя дилемма начинается, когда я хочу вызвать triggerPixelRefresh () сразу после вызова updatePixelBuffer (x, y).Таймер не должен отключаться после этого вызова.

updatePixelBuffer(1, 2);
triggerRefresh();

Поскольку setState является асинхронным, я не знаю, как гарантировать, что window.clearTimeout в triggerPixelRefresh () очистит вновьустановить таймер в updatePixelBuffer, если они вызываются один за другим.Я не уверен, какой шаблон использовать, чтобы гарантировать это.

updatePixelRefresh устанавливает таймер так, чтобы, если triggerPixelRefresh не был вызван позже, он был вызван.Это гарантирует, что операции в буфере будут выполнены позже.triggerRefresh должен отменить этот таймер и немедленно обновить структуру данных с сохраненными операциями.Мне нужно предотвратить вызов обновления в непредсказуемое время.

Технически я мог бы просто напрямую изменить состояние, чтобы они запускались синхронно, но я бы предпочел этого не делать.

Ответы [ 2 ]

0 голосов
/ 24 ноября 2018

Должно быть относительно легко получить то, что вы ищете, использовать в своей работе перехватчики обратного вызова.Таким образом, вместо того, чтобы пытаться вызвать синхронность, вызывая одну функцию за другой (, даже если это работает в повседневной работе, это все еще технически не гарантировано, потому что ОС / среда выполнения / Оборудование могут решить посетить более важную работу, прежде чем запускатьследующая функция ), поэтому я бы сказал, что вместо triggerPixelRefresh в качестве функции можно ввести updatePixelBuffer, чтобы вы могли лучше контролировать, когда ее вызывать.

updatePixelBuffer(x, y,triggerRefreshHandler) {
...call triggerRefresherHandler at the appropriate time here
}

Тогда вы можете сделать

updatePixelBuffer(1, 2,triggerRefresh);

Вероятно, это не слишком критично, но я заметил, что вы используете довольно много оконных объектов, мне просто интересно, не вызовет ли это никаких проблем, так как React использует Virtual DOM, а SPA обычно будеттакже запускается на сервере, если вы хотите, чтобы производительность сервера отображалась, и в такой среде, как окно NodeJS, не существовало бы.

Счастливое кодирование

0 голосов
/ 24 ноября 2018

setState(state,callback) для этого существует перегрузка: чтобы гарантировать, что callback вызывается после изменения состояния.

при этом вы можете преобразовать свой updatePixelBuffer, чтобы получить Promise, который разрешаетсякогда callback был вызван.

также, вы можете иметь свой triggerPixelRefresh и возвращать обещание, которое разрешается немедленно.

в конце, обернуть их обоих в функцию, иметь функцию выставитьtriggerPixelRefreshPromise разрешить метод, который вы можете вызвать позже.

в конце оберните оба обещания в Promise.race([p1,p2]).

, что Promise.race(p1,p2) делает, это то, что он разрешается в зависимости от p1,p2 Обещания разрешаются первыми (другими словами, тайм-аут или ваш прямой вызов).

взгляните также на это: Понимание использования обещания.race ()

...