只允許在500ms後通過點擊元素

如果自從元素最後一次點擊以來只有500ms已經過去，我如何使.on（）函數內的所有內容都運行？我正在努力使這項工作，以便你不能快速點擊元素。我希望點擊只在自最後一次點擊後經過500ms時才進行註冊。只允許在500ms後通過點擊元素

$(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); 

});

來源

2017-02-22 Dustin

如果您使用lodash，你可以使用['throttle'（https://lodash.com/docs/4.17.4#throttle）。 – SimpleJ

我一定會禁用並重新啓用該按鈕，以便用戶知道它已超時，而不僅僅是無法響應。確保你有一個視覺提示。 –

的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); 

});

來源

2017-02-22 18:14:01

您可以通過setTimeout做到這一點，並作出toggled變量。

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

如果點擊不反轉（例如，500毫秒等着），它會做的事情，然後設置一個計時器500毫秒，然後使它重新做的事。

來源

2017-02-22 18:14:33

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); 
});

這有點不好意思，但是做這個工作。

來源

2017-02-22 18:15:10 mehulmpt

您可以設置條件，如果設置布爾變量爲true，則可以執行點擊事件。一旦用戶點擊它，它會通過定時器變爲假，在amount時間後，它將變爲true，點擊事件將再次成爲可能。

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>

來源

2017-02-22 18:16:00

只允許在500ms後通過點擊元素

回答

相關問題