4

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

window.onresize = repositionElements;

scrollElement.onscroll = handleScrollBusiness;

现在，当我调整窗口大小时，我不希望我的 onscroll 事件触发（它通常在调整大小期间执行）。所以我想我暂时设置了一些isResizing变量，并且只有在超时true后才将其设置回。false在 onscroll 函数中，我首先会检查是否isResizing为假，然后才继续。

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

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

我正在寻找香草 JavaScript 的答案。我也是新手，所以如果我在处理这个问题的方式上有一些逻辑缺陷，请告诉我。

谢谢！

4

2 回答 2

3

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

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

这是一个例子：

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

window.onresize = function () {
    // your code here...
    // should be executed before onscroll handler
}
于 2017-08-11T12:23:49.823 回答
1

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

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

于 2017-08-11T12:52:00.510 回答