Question

如果自上次点击元素以来仅过了500毫秒，我怎样才能运行.on（）函数内的所有内容？我正在尝试使这项工作，以便你不能快速点击元素。我希望点击仅在最后一次点击后已经过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);

});

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

您可以通过interface{}并制作[map[options:[a b c]] map[startDialogs:[dialog1]]]变量来执行此操作。

setTimeout

如果没有切换点击（例如，等待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

您可以设置条件，如果设置boolean variable为true，则可以执行click事件。一旦用户点击它，它就会被计时器变为假，在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>

仅在500ms过后才允许单击元素

4 个答案: