Javascript 仅允许在经过500毫秒后单击图元

如果自上次单击元素以来只经过500毫秒，如何使.on（）函数中的所有内容都运行？我正在努力使这项工作，使你不能快速射击点击元素。我希望单击仅在上次单击后经过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);

});

---

将

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

});

---

将

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

});

---

您可以通过

setTimeout

和切换

变量来完成此操作

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

如果单击未切换（例如，等待500毫秒），它将执行此操作，然后将计时器设置为500毫秒，然后允许它再次执行此操作。
您可以通过
setTimeout
和设置
切换变量来执行此操作

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

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

如果单击没有切换（例如，等待500毫秒），它将执行该操作，然后将计时器设置为500毫秒，然后允许它再次执行该操作

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

这有点老套，但确实管用

这有点老套，但可以完成这项工作。
您可以设置一个条件，如果set boolean variable为true，则单击事件是可能的。一旦用户单击它，它会随着计时器变为false，在
amount
一段时间后，它将变为
true
，并且单击事件将再次发生


var bool=true；
$（文档）.on（'click'，'.box'，函数（e）{
e、 预防默认值（）；
//你的代码
如果（bool）{
log（'clicked&passed'）；
布尔=假；
setTimeout（函数（）{
布尔=真；
}, 500);
}
});
.box{
高度：50px；
宽度：50px；
背景：蓝色；
}
您可以设置一个条件，如果set boolean variable为true，则单击事件是可能的。一旦用户单击它，它会随着计时器变为false，在
amount
一段时间后，它将变为
true
，并且单击事件将再次发生


var bool=true；
$（文档）.on（'click'，'.box'，函数（e）{
e、 预防默认值（）；
//你的代码
如果（bool）{
log（'clicked&passed'）；
布尔=假；
setTimeout（函数（）{
布尔=真；
}, 500);
}
});
.box{
高度：50px；
宽度：50px；
背景：蓝色；
}

如果您使用的是lodash，您可以使用。我会确保禁用并重新启用该按钮，以便用户知道它已超时，而不仅仅是无法响应。确保你有一个视觉提示。如果你使用lodash，你可以使用。我会确保禁用并重新启用按钮，以便用户知道它超时了，而不仅仅是没有响应。确保你有视觉提示。