jQuery - 非同期関数が同時に複数回実行されないようにする

Question

子ノードの要求をリストに送信して表示する「onmouseover」によってトリガーされる非同期関数があります。これを同期させるように設定すると、これを防ぐことができますが、私が知る限り、ChromeとIEにロードアイコンを表示するには非同期である必要があります。問題は、関数がまだ実行されている間に複数回マウスオーバーすると、子を複数回読み込むことです。私が問題を抱えているのは、子ノードが複数回読み込まれるのを防ぐために、関数が一度に複数回実行されないようにすることです。

ありがとうございます！

私のAJAX呼び出し（jQueryの代わりに$ Iはnoconflictモードで実行していますので）：

var ul = "#ul_" + categoryId; 
    var ifUlExists = jQuery(ul); 

    // Only if UL not already loaded 
    if (ifUlExists.length == 0) { 

     jQuery.ajax({ 
    type: 'POST', 
    url: '/adminajax/add_kids', 
    data: { 
     categoryId: categoryId 
    }, 
    beforeSend:function(){ 
     // Toggle +/- icon 
     jQuery(expandIcon).addClass("loading"); 
    }, 
    success:function(resp){ 
     var kids = resp;   
     // If there are kids returned by the query 
     if (kids){ 
     var container = "#c_"+categoryId;  
     jQuery(kids).insertAfter(jQuery(container)); 
     jQuery(ul).slideDown("slow"); 
     } 
    })}; 
    } else { 
    jQuery(expandIcon).addClass("collapse"); 
    jQuery(ul).slideDown("slow"); 
    } 

Answer 1

"同時に" 実行するつもりはありません。より良い言葉は「同時に」であろう。とにかくちょうどフラグ設定：

if (ifUlExists.length === 0 && !$('body').data('loadingUl')) { 
    $('body').data('loadingUl', true); 
    // the rest of your code 
} 

「ボディ」要素データを使用してそれを行うには無数の方法の一つですが、私は一種-のそれのような$('body')は、jQueryのことでかなり安い作られているので。もちろん、どこにでも旗を残すことができます。

Answer 2

フラグが一つの選択肢です：

var running = false; 

$(selector).mouseover(function() { 
    if(!running) { 
     running = true; 
     callAsyncFunction(); 
    } 
}); 

とAjaxリクエストのコールバックで、再びrunning = falseを設定します。

複数の要素に対してこれを実行する場合は、その要素のdata()関数を@Pointy describes in his answerとして使用できます。