Условия гонки с событиями jQuery

Question

У меня есть список элементов с привязными тегами, чей href я динамически заполняю при наведении. Вот мой код привязки:

$('.charts-container').on('mouseenter', '.track', function(e) { 
    Itunes.populateDownloadLink(e); 
} 

Вот код, который срабатывает при возникновении события:

var ITunes = { 
    populateDownloadLink: function(e) { 
e.preventDefault(); 
trackDownloadLink = jQuery(e.currentTarget).find('.itunes-download a'); 
    if (trackDownloadLink.attr('href') == '#') { 
     apiURL = ITunes.getApiUrl(trackDownloadLink); 
     // retrieve iTunes download link from iTunes API 
     jQuery.getJSON(apiURL, function(data) { 
     if (data.results.length > 0) { 
      trackDownloadLink.attr('href', data.results[0].trackViewUrl); 
     } 
    }); 
} 

Это работает по большей части, за исключением того, когда я парить очень быстро между элементами. Иногда, когда это происходит, кажется, что ссылки будут перепутаны. Элемент над другим элементом, например, будет иметь ссылку, которая была сгенерирована элементом ниже, когда я быстро завис над ним. Кажется, что существует какое-то условие гонки, когда элемент берет первый сгенерированный URL, даже если это не тот элемент, для которого был создан URL. Я нахожу это странным, потому что я использую e.currentTarget, который из того, что я понимаю, всегда должен ссылаться на элемент, к которому привязана функция, а не где мышь в данный момент является или даже точным элементом, который вызвал событие для регистрации.

Answer 1

Проблема, кажется, вы объявляете trackDownloadLink как глобальную переменную, вы должны объявить его в качестве локальной переменной метода populateDownloadLink с помощью var объявить его.

Если вы используете его в качестве глобальной переменной, предположим, что вы наведите курсор мыши на ссылку 1, то trackDownloadLink будет относиться к соответствующему анкерного элемента и Ajax запрос отправляется получить значение href, то перед Аякса завершается вам парить над LINK2 теперь глобальная переменная trackDownloadLink ссылается на якорь в link2 вместо link1, а затем возвращается первый ajax, в это время в ajax завершается, когда выполняется trackDownloadLink.attr('href', data.results[0].trackViewUrl);. trackDownloadLink ссылается на вторую ссылку вместо первой.

var trackDownloadLink = jQuery(e.currentTarget).find('.itunes-download a');