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

时间:2017-08-11 12:15:18

标签: javascript events operator-precedence onscroll onresize

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

window.onresize = repositionElements;

scrollElement.onscroll = handleScrollBusiness;

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

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

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

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

谢谢!

2 个答案:

答案 0 :(得分:3)

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

您可以尝试通过将其代码包装在零长度超时内来推迟执行window.onscroll = function () { setTimeout(function () { // your code here... }, 0); } window.onresize = function () { // your code here... // should be executed before onscroll handler } 处理程序,这有效地将该段代码的执行移动到当前执行堆栈的末尾。

以下是一个例子:

{{1}}

答案 1 :(得分:0)

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

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