Как предотвратить запуск функции onscroll во время изменения размера?

У меня определены два обработчика событий:

window.onresize = repositionElements;

scrollElement.onscroll = handleScrollBusiness;

Теперь, когда я изменяю размер окна, я не хочу, чтобы мое событие onscroll запускалось (что обычно происходит во время изменения размера). Поэтому я подумал, что временно установил некоторую переменную isResizing в true и только после тайм-аута вернул ее в false. В функции onscroll я бы тогда первым делом проверил, если isResizing ложно и только потом продолжил.

Однако теперь, во время тестирования этого, я понял, что когда я начинаю измените размер окна, он одновременно запускает событие прокрутки и изменения размера, но сначала он запускает событие onscroll , поэтому у моего onresize нет возможности отключить функцию прокрутки, так как она запускается только после того, как функция прокрутки начала выполняться.

Есть ли какой-нибудь способ обойти это? Могу ли я глобально изменить порядок этих двух событий? Если нет,то как еще можно отключить событие onscroll сразу же, как только я начну изменять размер?

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

Спасибо!

2 3
javascript events order-of-evaluation

2 ответа:

Поскольку вы не опубликовали пример кода своей проблемы, я не уверен, поможет ли вам то, что я собираюсь написать.

Вы можете попытаться отложить выполнение обработчика onscroll, обернув его код в таймаут нулевой длины, который эффективно перемещает выполнение этого фрагмента кода в конец текущего стека выполнения.

Вот пример: 

window.onscroll = function () {
    setTimeout(function () {
        // your code here...
    }, 0);
}

window.onresize = function () {
    // your code here...
    // should be executed before onscroll handler
}
3

Вы можете использовать RxJS Observable для этого: 

var resizeOb$ = Rx.Observable.fromEvent(window, 'resize');
var scrolOb$ = Rx.Observable.fromEvent(window, 'scroll')
              .takeUntil(resizeOb$);
scrolOb$.subscribe(function(event){

     /* handle scroll event here */
});
resizeOb$.subscribe(function(event){

     /* handle resize event here */
});

Это позволит эффективно справиться с ситуацией для вас.

0