如何防止在调整大小期间触发onscroll功能？

Question

我定义了两个事件处理程序：

window.onresize = repositionElements;

scrollElement.onscroll = handleScrollBusiness;

现在，当我调整窗口大小时，我不希望我的onscroll事件被触发（在调整大小时它通常会这样做）。 所以我想我暂时将一些isResizing变量设置为true并在超时后才将其设置为false 。 在onscroll函数中，我首先检查，如果isResizing为false，则只进行。

但是，现在在测试时，我意识到当我开始调整窗口大小时，它会触发一个滚动和调整大小事件，但它会先触发onscroll事件，所以我的onresize没有机会禁用滚动功能，因为它只有在scroll函数开始执行后被触发。

有没有办法解决？ 我可以全局更改这两个事件的顺序吗？ 如果没有，一旦我开始调整大小，还有什么方法可以立即禁用onscroll事件？

我正在寻找一个vanilla JavaScript的答案。 我也是新手，所以如果我有办法解决这个问题，请告诉我。

谢谢！

Answer 1

由于您尚未发布问题的示例代码，因此我不确定我要写的内容是否对您有所帮助。

---

您可以尝试通过将其代码包装在零长度超时内来推迟onscroll处理程序的执行，这有效地将该段代码的执行移动到当前执行堆栈的末尾。

这是一个例子：

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

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

Answer 2

您可以使用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 */
});

这将有效地为您处理这种情况。