Jquery - problem z podwójnym kliknięciem, ponieważ zmiana w klasie

Question

Mam przycisk. onclick Zmieniam klasę tego przycisku, ale kiedy dwukrotnie klikam jego zmienną klasę. Cała moja funkcjonalność depend on current class jak wyłączyć podwójne kliknięcie lub ukończyć żądanie przy pierwszym kliknięciu.

function data() { 
    lastScrollTop = 0; 
    document.getElementById("expand-dataset-btn").disabled = false; 
    var id = event.target.id 
    var allChildern = null 
    if(!$(".id_"+event.target.id).hasClass('minus-symbol')){ 
     $(".id_"+event.target.id).removeClass('plus-symbol').addClass('minus-symbol') 
     $.ajax({ 

      }, 
      success : function(result) { 

      } 
     }); 
    }else{ 
     $(".id_"+event.target.id).addClass('plus-symbol').removeClass('minus-symbol') 
     $.ajax({ 

      }, 
      success : function(result) { 

      } 
     }); 
    } 
} 

Wywołanie funkcji z kontrolerem jak poniżej

htmlDataId += "<a onclick=\"data()\" title='View' id="+row[primaryField]+"> 

Answer 1

Należy poczekać do zakończenia ajax

function data() { 

    lastScrollTop = 0; 
    document.getElementById("expand-dataset-btn").disabled = false; 
    var id = event.target.id; 
    var allChildern = null; 

    if($(".id_"+ id).hasClass("disable")) 
    { 
      event.preventDefault();    
    } 

    if(!$(".id_"+ id).hasClass('minus-symbol')){ 
     //make control disable 
     $(".id_"+ id).addClass('disabled'); 
     $.ajax({ 

      }, 
      success : function(result) { 
      //change here after success 
      $(".id_"+ id).removeClass('plus-symbol').addClass('minus-symbol'); 
      //remove control disable 
      $(".id_"+ id).removeClass('disabled'); 
     }); 
    }else{ 
     //make control disable 
     $(".id_"+ id).attr('disabled', true); 
     $.ajax({ 

      }, 
      success : function(result) { 
      //change here after success 
       $(".id_"+ id).addClass('plus-symbol').removeClass('minus-symbol'); 
       //remove control disable 
       $(".id_"+ id).attr('disabled', false); 
      } 
     }); 
    } 
} 

Answer 2

co trzeba jest funkcja "przepustnicy" lub funkcja "nieczułości".

Dławienie jest sposobem, za pomocą którego możemy ograniczyć liczbę razy, gdy dana funkcja może zostać wywołana w danym okresie. Na przykład możemy mieć metodę, która powinna być nazywana nie więcej niż 5 razy na sekundę.

można użyć podkreślenia underscore official website

lub

można użyć następujących kodów:

/*trigger specific eventhandler when the event is idle for specific time*/ 
function debounce(fn, delay, self) { 
    var timer = null; 
    return function() { 
     var context = self ? self : this, args = arguments; 
     clearTimeout(timer); 
     timer = setTimeout(function() { 
     fn.apply(context, args); 
     }, delay); 
    }; 
} 
//use in the following way 
$input.on('click',debounce(clickCallback,250)); 

wtedy, gdy drugi „kliknij” zdarzenie wywołane w ciągu 250 ms, zostanie on zignorowano: