Question

I have a paginated collection that could be simultaneously making multiple fetch()es. E.G. a user could click on ‘page 1’ see a ‘Loading…’ message then click on ‘page 2’ before page 1 loads, which would fire off another fetch() request (sending down a different page param obviously). Hopefully that makes sense. I handle this within a View (Coffeescript):

render: ->
  if @collection.hasPage()
    # render the view
  else
    el.append '<h3>Loading...</h3>'

    @collection.fetch
      success: (coll, resp) => @render()

However, if I click on page 1, then page 2 before page 1 loads, the success callback for page 1 ends up being called twice (so three success() calls overall). The success() callbacks get called in this order: page 1, page 2, page 1

Why is this happening? Should I be handling this with events? Should I not allow multiple fetch()es simultaneously? Thanks for the help.

UPDATE

This is how I’m doing it now:

initialize: ->
  @page = @collection.page

render: ->
  if @collection.hasPage(@page)
    #render
  else
    el.append 'Loading...'

    @collection.fetch
       success: (coll,resp) =>
         # do some stuff with coll
         if @page == @collection.page
           @render()

Seems to work…

Answer 1

This is why it happens (at least according to my logic):

1. Render is called -> a fetch for page 1 is fired
2. User clicks page 2
3. Render is called -> a fetch for page 2 is fired
4. The fetch from first call to page 1 returns -> success: (coll, resp) => @render()
5. WHAM BAM Render is called AGAIN -> page hasn’t been loaded so…
6. Fetch is called for the 3rd time and for page 1
7. Somewhere around here the call for page 2 returns

And you definitely should handle this with events as the problem is caused by your render function doing the fetching and the drawing.