0

いくつかのニュースを表示するWebページがあり、クリックするとサーバーへのAJAX呼び出しを行っている古いニュースを表示するボタンがあります。

問題は、クリックが速すぎるとリクエストが2回行われるため、2つの等しい応答を受け取ることです。

  • ＃mas-noticias-footerは、古いニュースを表示するボタンのIDです

  • .noticias-listは、新しいそれぞれに割り当てられたクラスです。.lengthを使用して、表示されるニュースの数を取得し、その数をLIMIT（numItems、3）を使用してSQLクエリを実行するPHPファイルにPOSTします（時間）。

  • ＃noticias-displayはニュースを含むulです

これはコードです

$(document).ready(function() {
  $("#mas-noticias-footer").on('click',function() {
var numItems = $('.noticias-list').length;
$.ajax({
        type: "POST",
        url: "mas-noticias.php",
    data: "num-noticias="+numItems,
    success: function(data) {
            $('#noticias-display').append(data);
            }
}); 
  });
});

onコールバックの開始時にoff（）を使用してイベントのバインドを解除しようとしましたが、複数の呼び出しを回避するために（これは機能します）、問題は、コールバックの終了時にon（）を使用してイベントを委任する場合です。それを機能させないでください。

4

5 に答える 5

3

バインドされたイベントがそのように返されることを期待して、off後で呼び出すのは便利ではありません。イベントはメモリに保存されません。on

ただし、DOM内にデータ変数を設定することはできます。

  $("#mas-noticias-footer").on('click',function() {
     var numItems = $('.noticias-list').length;
     var isAjaxRunning = $(this).data('iar');

     // check flag is set
     if(typeof isAjaxRunning == 'undefined') $(this).data('iar', 'yes'); 
     else if(isAjaxRunning == 'yes') return; // if still running, return

     $.ajax({
        type: "POST",
        url: "mas-noticias.php",
        data: "num-noticias="+numItems,
        success: function(data) {
            $('#noticias-display').append(data);
            $(this).data('iar', 'no'); // after successful run, set to no
        }
     }); 
  });
于 2012-04-12T01:49:59.133 に答える
1

ここで非同期呼び出しが本当に必要だとは思わない。の代わりに設定async:falseまたは使用してください。$.post()$.ajax()

于 2012-04-12T01:55:09.133 に答える
0 
$(document).ready(function() {
    $("#mas-noticias-footer").on('click', getnews);

    function getnews() {
        $("#mas-noticias-footer").off('click', getnews);
        var numItems = $('.noticias-list').length;
        $.ajax({
            type: "POST",
            url: "mas-noticias.php",
            data: "num-noticias="+numItems,
            success: function(data) {
                $('#noticias-display').append(data);
            },
            complete: function() {
                $("#mas-noticias-footer").on('click', getnews);
            }
        });
    }
});

委任でon（）を使用する場合は、必ずoff（）を同じように使用してください。

于 2012-04-12T01:49:46.153 に答える
0

ボタンを無効にしようとしましたか？

$(document).ready(function() {
    $("#mas-noticias-footer").on('click',function() {
        var self=this;
        $(self).attr('disabled','disabled'); //<-Disable
        var numItems = $('.noticias-list').length;
        $.ajax({
            type: "POST",
            url: "mas-noticias.php",
            data: "num-noticias="+numItems,
            success: function(data) {
               $('#noticias-display').append(data);
               $(self).removeAttr('disabled');//<-Enable
            }
        }); 
    });
于 2012-04-12T01:59:44.563 に答える
0

私はこれがすでに答えられていることを知っていますが、私は$.unbindコードを少し使用して分離することで解決策を作りました

デモ

于 2012-04-12T02:15:50.770 に答える