Angular2: directive triggers HTTP response for long time when scrolling with mouse

I made an infinite scroll directive and it works great for my use cases.

However, there is one problem.

When infiniteScrollAction

triggered by scrolling with the mouse wheel, the HTTP call created in the called function has a very long abnormal delay in response ... For example, it takes approximately 3-5 seconds for a response to return - guaranteed every time.

However, when I view the browser scrollbar, the response falls back to normal and is the same length as usual (very fast).

I can repeat this over and over again with success.

Here are some GIFs to demonstrate. The first one is scrolling with the mouse wheel, note that the loading bar at the top is very slow because it takes a while to respond. Second is scrolling with browser scrollbar, quick response. Both images are cropped and blurred for privacy:

Can anyone find something wrong with the directive? I don't understand ... at first I thought it had something to do with the event loop, but console.log()

inside each function I get called before the HTTP call function, and everything happens instantly.

This is literally an answer that takes longer depending on whether I scroll with the mouse wheel or with the browser scrollbar, which is absolutely ridiculous, but that's what happens. I can't figure out what happened. But I can prove this to be the case because I see the response as pending on the network tab in Chrome when scrolling with the mouse, but it doesn’t stay pending that long when I view the scrollbar.