Question

我有一个由“onmouseover”触发的异步函数，它将子节点的请求发送到列表并显示它们。将它设置为同步可以防止这种情况，但据我所知，它需要是异步的才能在Chrome和IE中显示加载图标。问题是如果在函数仍在执行时鼠标悬停多次，它会多次加载子项。我遇到的问题是阻止函数一次运行多次，以防止子节点被多次加载。

提前致谢！

我的ajax调用（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。

jQuery - 防止异步函数同时运行多次

2 个答案: