How to disconnect / unobserve element when using x-intersect

[docdunning]

I'm using x-intersect for a continuous scrolling application, progressively fetching chunks of data via an API. This is working OK, using x-intersect on a div element that is shown at the foot of the list.

In an ideal world, when all the data has eventually been shown, I would like to turn off x-intersect so that it doesn't keep firing if a user scrolls up/down again. I can't see any obvious way to do this, although the underlying API has "unobserve" and "disconnect" methods.

I have stopped it from firing by using x-show, to hide the intersect element when there's no more data. Is this the accepted way to cancel x-intersect, or is there some better approach?

[ekwoka]

What is the concern with it firing again?

What actions does it do?

Surely the function it runs can have a "done" check?

But yes, I normally just hide it once the thing is "done"

[docdunning]

@ekwoka - thanks for your reply.

In this case, the associated function does a fetch to an API, with a check for "done" like you say. So there isn't an issue with it firing again, aside from it being a redundant process, and I like to avoid such things if possible.

I'm using the "done" condition with x-show to hide the element, so it's covered that way too.

Another approach that I've tried is to remove the element from the dom, which obviously works as well, but is a bit more radical. At least using x-show, the element can be subsequently unhidden if necessary.

At least I know I'm not missing something :-)