只允许在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后通过点击元素

回答

相关问题