ajax渐进式增强:如何防止多个请求

Question

这是我正在做的一个简化版本。

我有一个像这样的标准菜单:

<ul id="menu">
   <li><a href="/link1.html">Link 1</a></li>
   <li><a href="/link2.html">Link 2</a></li>
   <li><a href="/link3.html">Link 3</a></li>
</ul>

在文档准备好了，我调用一个函数来阻止链接去任何地方，并为ajax加载绑定点击事件:

$('#menu a').click(function (e) {
        e.preventDefault();
        var link = $(this).attr('href');
        $.ajax({
                url: link,
                dataType: 'html',
                success: function (html) {
                   AJAX STUFF HERE
                }
        });
});

我的问题是什么是防止多个请求的好方法。

我的第一次尝试，点击，我有一个条件，检查类的"加载"。如果为false，它将"加载"类添加到我正在替换的html容器中，并在ajax成功时删除该类。这工作得很好，但如果用户试图发出多个请求，性能就会很差。我猜这是因为它每次都会触发一个事件，即使它没有做太多事情。

Answer 1

您可以将代码更改为在特定类中使用"on":

$('#menu').on('click', 'a', (function (e) {
  e.preventDefault();
  var link = $(this);
  if (!link.hasClass('loading') {
    link.addClass('loading');
    var href = link.attr('href');
    $.ajax({
      url: href,
      dataType: 'html',
      success: function (html) {
        // AJAX STUFF HERE
      },
      complete: function() { link.removeClass('loading'); }
    });
  }
});

你现在只有一个绑定(更有效)，当锚没有"加载"类时，它将采取ajax动作。注意，这需要jQuery 1.7+

jQuery .on()文档

编辑 (x2)

根据Dan的注释，以上代码已更新以确保正确性。也就是说，您可以通过将html和js更改为以下内容来略微提高效率。请注意，这意味着没有JavaScript的用户将简单地遵循链接。

<ul id='menu'>
  <li><a href='/link1.php'>Link 1</a></li>
  <li><a href='/link2.php'>Link 2</a></li>
  <li><a href='/link3.php'>Link 3</a></li>
</ul>
$('#menu')
  .on('click', 'a:not(.loading)', (function () {
    var link = $(this).addClass('loading');
    $.ajax({
      url: link.attr('data-href'),
      dataType: 'html',
      success: function (html) {
        // AJAX STUFF HERE
      },
      complete: function() { link.removeClass('loading'); }
    })
  })
  // Remove anchor tag href to eliminate possibility of following the link versus ajax load
  .find('a').each(function() {
    $(this).attr('data-href', $(this).attr('href')).removeAttr('href');
  });