0

我有一个带有锚标签的元素列表，我在悬停时动态填充其 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的是 ，据我了解，它应该始终指代函数绑定到的元素，而不是鼠标当前所在的位置，甚至是触发要注册的事件的确切元素。

4

1 回答 1

1

问题似乎是您要声明trackDownloadLink为全局变量，您需要populateDownloadLink通过 using 将其声明为方法的局部变量var来声明它。

如果您将其用作全局变量，假设您将鼠标悬停在链接 1 上，然后trackDownloadLink将引用相应的锚元素并发送 ajax 请求以获取该href值，然后在 ajax 完成之前，您将鼠标悬停在链接 2 上，此时全局变量trackDownloadLink正在引用到link2而不是link1中的锚点然后第一个ajax返回，此时在ajax完成时trackDownloadLink.attr('href', data.results[0].trackViewUrl);执行trackDownloadLink是指第二个链接而不是第一个。

var trackDownloadLink = jQuery(e.currentTarget).find('.itunes-download a');
于 2013-11-06T16:00:34.243 回答