当使用鼠标滚轮滚动时,Angular2：指令会导致HTTP响应花费很长时

发布时间：2020-12-17 16:59:58 所属栏目：安全来源：网络整理

导读：我做了一个 infinite scroll directive,它对我的??用例非常有用. 然而,有一个问题. 当使用鼠标滚轮滚动触发infiniteScrollAction时,在我调用的函数中进行的HTTP调用在响应中有一个非常长的异常延迟…例如,响应返回大约需要3-5秒 – 每次保证. 但是,当我使用

我做了一个 infinite scroll directive,它对我的??用例非常有用.

然而,有一个问题.

当使用鼠标滚轮滚动触发infiniteScrollAction时,在我调用的函数中进行的HTTP调用在响应中有一个非常长的异常延迟…例如,响应返回大约需要3-5秒 – 每次保证.

但是,当我使用浏览器滚动条滚动时,响应会恢复正常并且与通常的长度相同(非常快).

我可以一遍又一遍地重复这一点,并取得成功.

以下是一些GIF演示.第一个是用鼠标滚轮滚动,注意顶部的加载条是如何非常慢的,因为响应需要一段时间.第二个是滚动浏览器滚动条,快速响应.两张图片都因为隐私而裁剪和模糊：

enter image description here

有人可以发现指令有什么问题吗？我不明白……起初我认为它与事件循环有关,但我在每个函数调用内部调用console.log()直到HTTP调用函数,一切都发生了.

这实际上是响应需要更长的时间,这取决于我是使用鼠标滚轮还是使用浏览器滚动条滚动,这绝对是荒谬的,但它正是发生的事情.我无法弄清楚出了什么问题.但我可以证明这是事实,因为当我使用鼠标滚轮滚动时,我可以在Chrome上的网络选项卡中看到响应处于待处理状态,但是当我使用滚动条滚动时,它不会等待很长时间.

解决方法

你看过这个 Random high content download time in chrome?吗？

我正在使用ngx-infinite-scroll,我遇到了同样的问题.

所以我的解决方案(感谢上面提到的帖子)：

export class InfiniteScrollDirective {
...
    @HostListener('mousewheel')
    onMouseWheel() {
    }
...
}

即使没有任何实现,只是纯粹的监听器已经解决了这个问题.之后没有更慢的http请求.

你能试试吗？

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!