0

次のコードを使用して、正確に機能する ajax リクエストを送信していますが、ユーザーがリンクを複数回クリックすると問題が発生するため、リンクを無効にして、ユーザーが 2 回目にクリックしたときに ajax が呼び出されないようにします。

.html.erb

<%= link_to("Sports", "#", :class => "school_activity", :p_type => "Sport", :o_type => "")%>

JavaScript

jQuery(function () {
  jQuery('.school_activity').click(function () {
    link = jQuery(this);
    p_type = link.attr('p_type');
    o_type = link.attr('o_type');
    jQuery('.i-link a').removeClass('stream_wall_select');
    jQuery.ajax({
      type:"GET",
      url:'<%= some_path(@school) %>',
      data:'format=js&p_type=' + p_type + '&tagged_type=' + o_type,
      success:function (response) {
        jQuery('#s_activity_div').html(response);
      }
    });
  })
})

パラメータ true/false を設定するようなことはしたくなく、それに依存して ajax リクエストを送信します。

非常に一般化されており、自分のサイトのすべての ajax リンクに適用できるものが必要です。

4

4 に答える 4

2

hrefクリックが発生したら属性を削除し、完了したら再度追加します。

...
  jQuery('.school_activity').click(function () {
    var link = $(this).attr('href');
    jQuery(this).removeAttr('href');
   ...
    jQuery.ajax({ .... });
   ...
    jQuery(this).attr("href",link);
...

アップデート

jQuery メソッドone()を使用して、何かが 1 回だけ実行されるようにします。

要素のイベントにハンドラーをアタッチします。ハンドラは要素ごとに最大 1 回実行されます。

jQuery('.school_activity').one('click', function () {
    jQuery.ajax({
        ...
    });
});

注: これは、AJAX が失敗したかどうかに関係なく、1 回だけ実行されます。

于 2012-12-24T10:39:31.227 に答える
2

最初の単純で一般的な解決策 - 同期呼び出しを使用するには:

jQuery.ajax({
      type:"GET",
      async: false,
...

この場合、ブラウザは呼び出しが完了するまで待機します。ただし、ページがフリーズすることがあります（待機中）

2番目の解決策は、カスタムフラグ/属性を使用することですが、それは嫌いです( in_progress属性を見てください):

jQuery(function () {
  jQuery('.school_activity').click(function () {
    if( $(this).attr('in_progress') ) return;

    link = jQuery(this);
    p_type = link.attr('p_type');
    o_type = link.attr('o_type');
    jQuery('.i-link a').removeClass('stream_wall_select');

    $(this).attr('in_progress', 1);
    var link = this;

    jQuery.ajax({
      type:"GET",
      url:'<%= some_path(@school) %>',
      data:'format=js&p_type=' + p_type + '&tagged_type=' + o_type,
      success:function (response) {
        jQuery('#s_activity_div').html(response);
      }, 
      complete: function(){ $(link).removeAttr('in_progress'); }
    });
  })
})

堅牢で一般的なソリューションにするために、そのような状況向けのカスタム関数を作成できます。

function waCall( element, ajaxParams, beforeAjaxCallback, afterAjaxCallback ) {

    if( $(element).attr('in_progress') ) return; 

    var link = $(element);
    $(link).attr( 'in_progress' );

    ajaxParams['complete'] = function() { $(link).removeAttr('in_progress');
                             if( afterAjaxCallback ) afterAjaxCallback( link ); };

    if( beforeAjaxCallback ) beforeAjaxCallback(link);

    $.ajax( ajaxParams );
}


jQuery(function () {
      jQuery('.school_activity').click(function () {
          waCall( this, {
              type:"GET",
              url:'<%= some_path(@school) %>',
              data:'format=js&p_type=' + p_type + '&tagged_type=' + o_type,
              success:function (response) {
                  jQuery('#s_activity_div').html(response);
              }
            }, function(link) {
                var p_type = link.attr('p_type');
                var o_type = link.attr('o_type');
                jQuery('.i-link a').removeClass('stream_wall_select');
            }
      }
});
于 2012-12-24T10:49:31.640 に答える
1

次のようなフラグを使用できます

$(function(){
 $flag=false;

 $("#idOfYourLink").click(function(e){
   e.preventDefault();
   $flag=true;
   if(!$flag){
     $.ajax({
       ...
       success:function(){
           $flag=false;
         }//success ends
       });//ajax ends
    }//flag chk if ends
  });//click handler ends
});//document ready ends

編集：

あなたが特に言及したので

パラメータ true/false を設定するようなことはしたくなく、送信 > ajax リクエストに依存します。

クリックイベントハンドラーを単純にアンバインドし、ajax 呼び出しの成功コールバックで再アタッチできます。

于 2012-12-24T10:38:25.517 に答える