Разрешить только щелчок элемента после того, как прошло 500 мс

Question

Как я могу сделать все внутри функции .on(), если прошло только 500 мс с момента последнего нажатия на элемент? Я пытаюсь выполнить эту работу, чтобы вы не могли быстро стрелять по элементу. Я хочу, чтобы клики регистрировались только после того, как прошло 500 м с момента последнего клика.

$(document).on('click', 'a.next, a.prev, nav ul a', function(e){ 

    e.preventDefault(); 

    //Set side nav item to be active 
    var page = $(this).data("page"); 
    var sectionClicked = $(this).data("section"); 
    var currentSection = $("body").attr("data-current-section"); 
    var currentPage = $("body").attr("data-current-page"); 

    if($(this).hasClass("side_nav_link")){ 
     var section = $(this).data("section"); 

     ga('send', 'event', { 
      'eventCategory': 'Side Nav', 
      'eventAction': 'Click', 
      'eventLabel': section 
     }); 
    } 

    if($(this).hasClass("next")){ 
     ga('send', 'event', { 
      'eventCategory': 'Prev/Next Links', 
      'eventAction': 'Click', 
      'eventLabel': 'Next' 
     }); 
    } 

    if($(this).hasClass("prev")){ 
     ga('send', 'event', { 
      'eventCategory': 'Prev/Next Links', 
      'eventAction': 'Click', 
      'eventLabel': 'Prev' 
     }); 
    } 


    loadContent(page, sectionClicked, currentSection, currentPage); 

}); 

Answer 1

Добавить значение this другой переменной и создать SetTimeout.

$(document).on('click', 'a.next, a.prev, nav ul a', function(e){ 

    // prevent defaults 
    e.preventDefault(); 

    // add this to new variable 
    var parentThis = this; 

    // set the timeout function 
    setTimeout(function(){ 

     //Set side nav item to be active 
     var page   = $(parentThis).data("page"), 
      sectionClicked = $(parentThis).data("section"), 
      currentSection = $("body").attr("data-current-section"), 
      currentPage = $("body").attr("data-current-page"); 

     if($(parentThis).hasClass("side_nav_link")){ 
      var section = $(parentThis).data("section"); 
      ga('send', 'event', { 
       'eventCategory': 'Side Nav', 
       'eventAction': 'Click', 
       'eventLabel': section 
      }); 
     } 

     if($(parentThis).hasClass("next")){ 
      ga('send', 'event', { 
       'eventCategory': 'Prev/Next Links', 
       'eventAction': 'Click', 
       'eventLabel': 'Next' 
      }); 
     } 

     if($(parentThis).hasClass("prev")){ 
      ga('send', 'event', { 
       'eventCategory': 'Prev/Next Links', 
       'eventAction': 'Click', 
       'eventLabel': 'Prev' 
      }); 
     } 

     loadContent(page, sectionClicked, currentSection, currentPage); 

    }, 500); 

}); 

Answer 2

Вы можете сделать это с помощью setTimeout и сделать toggled переменную.

var toggled = false 
(document).on('click', '#target', function(e){ 
    if(!toggled){ 
     toggled = true 
     setTimeout(function(){ 
      toggled = false 
     },500) 
     //Do stuff 
    } 
}); 

Если щелчок не переключается (Например, ждание 500мса), он будет делать то, а затем установить таймер для 500мса, а затем позволить ему сделать это снова.

Answer 3

var clickInProgress = false; 
$(document).on('click', 'a.next, a.prev, nav ul a', function(e){ 
if(clickInProgress) return; 
clickInProgress = true; 
//.. 

setTimeout(function() { clickInProgress = false; }, 500); 
}); 

Это немного хакерский, но он выполняет свою работу.

Answer 4

Вы можете установить условие, если заданная булева переменная истинна, возможно событие щелчка. Как только пользователь нажмет на него, он изменится на false с таймером, после amount времени он станет true, и событие click станет возможным снова.

var bool = true; 
 

 
$(document).on('click', '.box', function(e) { 
 
    e.preventDefault(); 
 

 
    //your code 
 

 
    if (bool) { 
 
    console.log('clicked&passed'); 
 
    bool = false; 
 
    setTimeout(function() { 
 
     bool = true; 
 
    }, 500); 
 
    } 
 

 
});

.box { 
 
    height: 50px; 
 
    width: 50px; 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='box'></div>