1

これが私がやっていることの単純化されたバージョンです。

次のような標準メニューがあります。

<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 の成功時にクラスを置き換えて削除します。これは正常に機能しますが、ユーザーが複数のリクエストを行おうとするとパフォーマンスが低下します。これは、多くのことをしていなくても、毎回イベントを発生させているためだと思います。

4

1 に答える 1

2

特定のクラスで「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'); }
    });
  }
});

現在、バインディングは 1 つしかなく (より効率的)、アンカーに「読み込み」クラスがない場合は 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');
  });
于 2013-01-10T14:34:32.500 に答える