jQuery - 비동기 함수가 두 번 이상 실행되지 않도록 유지

Question

자식 노드에 대한 요청을 목록에 보내고 표시하는 "onmouseover"에 의해 트리거되는 비동기 함수가 있습니다. 동기화를 설정하면이를 방지 할 수 있지만 Chrome 및 IE에로드 아이콘을 표시하려면 비동기 적이어야합니다. 문제는 함수가 여전히 실행되는 동안 두 번 이상 마우스를 올리면 여러 번 자식을로드한다는 것입니다. 내가 문제가되는 것은 자식 노드가 두 번 이상로드되지 않도록 한 번에 두 번 이상 실행하지 못하게하는 것입니다.

미리 감사드립니다.

내 아약스 호출 (대신 $의 jQuery를 내가 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"원소의 데이터를 사용하여 그것을 할 수있는 엄청나게 많은 방법 중 하나입니다,하지만 난 종류-의 그것과 같은 $('body')은 jQuery를에 의해 꽤 저렴하게되기 때문이다. 물론 깃발을 보관할 수 있습니다.

Answer 2

플래그는 하나 개의 옵션입니다 :

var running = false; 

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

및 Ajax 요청의 콜백에 다시 running = false을 설정합니다.

여러 요소에 대해이 작업을 수행하려면 해당 요소의 data() 함수를 @Pointy describes in his answer으로 사용할 수 있습니다.