Racing condition when using InfinitePages with Turbolinks

[marckohlbrugge]

I've been using InfinitePages for a while (love it!) and I'm now in the process of adding Turbolinks to my site as well. I'm running into an issue where the user might click on a link before the $.getScript request made by InfinitePages is finished loading.

Before Turbolinks this wasn't a problem. The $.getScript request would simply be aborted the moment the user browses away from the page, but with Turbolinks enabled that request keeps loading even when you visit a completely different page. The request made by InfinitePages is still executed even if we're on a different page now which can lead to problems such as inserting the wrong content into the page, etc.

I see three ways of solving this:

1. Delay any Turbolinks loads until InfinitePages is completely finished. We could do this by adding a listener for turbolinks:before-visit when InfinitePages starts a request (loading callback), cancel the visit, store the URL, and load it once InfinitePages is done (success callback). – This is not ideal however, as it blocks the user from visiting pages while he/she's waiting for a request that's not even relevant anymore.

2. Abort the InfinitePages request if Turbolinks has opened a new page. I don't see any way for $.getScript to be aborted once it's been loaded unless InfinitePages would store the jqXHR object that's returned by it, which currently isn't the case. (feature request?)

3. Within the requested Javascript verify we're still on the same page. If when the request is finished loading we're on a different page then when the request was initiated, we shouldn't do anything. (i.e. if(verifySamePageAsInitiatedOn) { /* execute code */ }) – This might be the simplest fix for now, but I'm not sure how to verify we're still on the same page. (listen for turbolinks:load event when InfinitePages starts loading the page?)

Any input would be very welcome. 🙌

Update: I'm trying out option 2 by adding an abort method to InfinitePages. It's not working yet, but you can follow my progress here: https://github.com/marckohlbrugge/jquery-infinite-pages/blob/master/app/assets/javascripts/jquery.infinite-pages.js.coffee#L117

[leemour]

@marckohlbrugge did you manage to get your fork working? I.e. can I use your fork with turbolinks?

[marckohlbrugge]

@leemour No unfortunately I didn't get it to work yet.