Как я могу ограничить область переменной счетчика Javascript объектом?

Question

Я использую @Phrogz's quick script отменить все, кроме последнего запроса AJAX с помощью следующих действий:

var fooXHR, fooCounter=0; 
$('div').bind('click', function(){ 
    // Do the Right Thing to indicate that we don't care about the request anymore 
    if (fooXHR) fooXHR.abort(); 

    var token = ++fooCounter; 
    fooXHR = $.get(..., function(data){ 
    // Even aborted XHR may cause the callback to be invoked 
    if (token != fooCounter) return; 

    // At this point we know that we're using the data from the latest request 
    }); 
}); 

Этот скрипт работает очень хорошо, но если я загружаю 3 div сек сразу на PageLoad и рассчитывают загрузить результаты все 3, приведенный выше сценарий будет показывать только последний (поскольку первые два прерываются на основе сценария выше).

Можете ли вы указать мне в правильном направлении, чтобы ограничить вышеуказанный сценарий закрытым элементом DOM?

Например ...

<div id="one">1. run ajax on pageload and on click</div> 
<div id="two">2. run ajax on pageload and on click</div> 
<div id="three">3. run ajax on pageload and on click</div> 

Я хочу, чтобы все три дивы вернуть запрос Аякса на PageLoad или нажмите кнопку. И я хочу сохранить функциональность отмены предыдущего запроса AJAX при нажатии. НО, я не хочу нажимать на div#one, чтобы отменить запрос ajax, вызванный от div#two.

Вы следуете?

Answer 1

Просто используйте хэш для хранения XHR и переменную счетчика для каждого div:

var requests = {}; 
$('div').bind('click', function(){ 
    var div = this; 

    // init the entry for the div 
    if (requests[div] === undefined) { 
    requests[div] = {}; 
    requests[div].counter = 0; 
    } 

    // abort the old request 
    if (requests[div].xhr !== undefined) { 
    requests[div].xhr.abort(); 
    } 

    var token = ++requests[div].counter; 
    request[div].xhr = $.get(..., function(data) { 
    // check for correct request 
    if (token !== requests[div].counter) return; 

    // ... 
    }); 
});