单击集合标题后，Backbonejs呈现集合

Question

I am still using backbonejs since find it extremely easy and fast to bootstrap new micro API based website.

Question is about best practice when it comes to collection loading and rendering upon the collection group click.

Lets say i have static list of brands. On click on the brand I initiate fetching of the collection and upon fetch end successful I render the collection.

The problem happens when the user click on the brands not having the previous click processed, so what happens is that there are 2 collections og both brands loaded and rendered. What is the best way to deal with this in order to "cancel" or just ignore the first fetch and only render the last one that user clicked?

I found the solution is just deactivate the brand list until the request is processed, but it annoying UX wise because user might want to click right away on another one not waiting for the results (if he miss-clicked for example)

Answer 1

The underlying xhr object returned from Backbone.fetch has the ability to cancel the current request, xhr.abort() .

When the user clicks and the collection fetches, save the return value.

var xhr = myCollection.fetch()

The xhr has properties that tell you the current status of the request.

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState

If the user clicks again and causes the collection to fetch while another request is still processing, simply ask the xhr if it's in the middle of a request. If it is, abort, and continue with your current fetch, and reassign the xhr object.

Sample code:

function userClickedSomething(){
    if(xhr.readyState > 0 && xhr.readyState < 4)
        xhr.abort()
    xhr = myCollection.fetch()
}

How you store a reference to the xhr object is up to you.

More details: Is it possible to stop Backbone "read" requests