如何防止在调整大小时触发 onscroll 函数?
How can I prevent onscroll function to trigger during resize?
我定义了两个事件处理程序:
window.onresize = repositionElements;
scrollElement.onscroll = handleScrollBusiness;
现在,当我调整 window 大小时,我 不希望 触发我的 onscroll 事件(它通常在调整大小时执行)。所以我想我暂时将一些 isResizing
变量设置为 true
并且只在超时后将其设置回 false
。在 onscroll 函数中,我会首先检查 isResizing
是否为假,然后才继续。
但是,现在在测试过程中,我意识到当我开始调整 window 大小时,它会触发滚动和调整大小事件,但会触发 onscroll
事件 first,所以我的 onresize
没有机会禁用滚动功能,因为它只有在滚动功能开始执行后才会被触发。
有什么办法解决这个问题吗?我可以全局更改这两个事件的顺序吗?如果没有,还有什么其他方法可以在我开始调整大小时立即禁用 onscroll 事件?
我正在原版中寻找答案 JavaScript。我也是新手,所以如果我在处理这个问题时有一些逻辑上的缺陷,请告诉我。
谢谢!
由于您没有发布问题的示例代码,我不确定我将要写的内容是否对您有所帮助。
您可以尝试通过将其代码包装在零长度超时内来延迟 onscroll
处理程序的执行,这有效地将那段代码的执行移动到当前执行堆栈的末尾。
这是一个例子:
window.onscroll = function () {
setTimeout(function () {
// your code here...
}, 0);
}
window.onresize = function () {
// your code here...
// should be executed before onscroll handler
}
您可以为此使用 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 */
});
这将有效地为您处理这种情况。
我定义了两个事件处理程序:
window.onresize = repositionElements;
scrollElement.onscroll = handleScrollBusiness;
现在,当我调整 window 大小时,我 不希望 触发我的 onscroll 事件(它通常在调整大小时执行)。所以我想我暂时将一些 isResizing
变量设置为 true
并且只在超时后将其设置回 false
。在 onscroll 函数中,我会首先检查 isResizing
是否为假,然后才继续。
但是,现在在测试过程中,我意识到当我开始调整 window 大小时,它会触发滚动和调整大小事件,但会触发 onscroll
事件 first,所以我的 onresize
没有机会禁用滚动功能,因为它只有在滚动功能开始执行后才会被触发。
有什么办法解决这个问题吗?我可以全局更改这两个事件的顺序吗?如果没有,还有什么其他方法可以在我开始调整大小时立即禁用 onscroll 事件?
我正在原版中寻找答案 JavaScript。我也是新手,所以如果我在处理这个问题时有一些逻辑上的缺陷,请告诉我。
谢谢!
由于您没有发布问题的示例代码,我不确定我将要写的内容是否对您有所帮助。
您可以尝试通过将其代码包装在零长度超时内来延迟 onscroll
处理程序的执行,这有效地将那段代码的执行移动到当前执行堆栈的末尾。
这是一个例子:
window.onscroll = function () {
setTimeout(function () {
// your code here...
}, 0);
}
window.onresize = function () {
// your code here...
// should be executed before onscroll handler
}
您可以为此使用 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 */
});
这将有效地为您处理这种情况。