如何使用 jQuery 禁用双击或超时点击？答案

【问题标题】：How to disable double clicks or timeout clicks with jQuery?如何使用 jQuery 禁用双击或超时点击？
【发布时间】：2012-02-19 23:33:19
【问题描述】：

我有一个锚点，它使用 jQuery .click 事件来启动一些函数。

jQuery(document).ready(function(){  
    jQuery('a.slide_circ').click(function(){ 
        do_all_functions();
        return false; 
    });
});

这是简短的代码.. 它按需要工作，每次点击锚类 slide_circ 开始 do_all_functions。

但是我有一个问题。如果用户双击他们会运行 2 次或更多的功能...... 以及想法如何走向地狱。

我认为我需要以某种方式禁用双击或在我的函数上设置超时，这样它就不会每次都运行。谁能帮帮我？

【问题讨论】：

And the how idea go to hell. 什么？
所以你希望点击处理程序只工作一次，永远？或者是什么？尝试设置变量？
不，我希望它的工作次数与点击次数一样多。但如果用户快速点击 2-3-4 次，则阻止这些点击。正常点击间隔是 500ms ，所以如果用户在 500ms 内点击了 2 次或更多，脚本应该只运行 1 次我的函数，而不是 2-3-4..
这不是你的问题所说的。在其中，您似乎建议您在用户单击两次时不想要两次函数调用。 [编辑：对，好的。这样就更清楚了。]

标签： jquery click double-click

【解决方案1】：

使用.data 方法将状态分配给元素。然后，使用setTimeout 重置状态：

jQuery(document).ready(function() {
    jQuery('a.slide_circ').click(function() { 
        var $this = jQuery(this);
        if ($this.data('activated')) return false;  // Pending, return

        $this.data('activated', true);
        setTimeout(function() {
            $this.data('activated', false)
        }, 500); // Freeze for 500ms

        do_all_functions();
        return false; 
    });
});

【讨论】：

这很完美:) 我尝试设置相同的超时但我犯了一个错误.. 谢谢

【解决方案2】：

有几种方法可以做到，但一种方法是：

jQuery(document).ready(function(){ 
    var do_all_functions_running = false; 
    jQuery('a.slide_circ').click(function(){
        if (!do_all_functions_running) { 
            do_all_functions_running = true;
            do_all_functions();
            do_all_functions_running = false;
        }
        return false;   
    });  
});

不完美，但它会工作。

【讨论】：

这不行，你是在使用.click()的时候设置点击事件，而不是执行函数。
这个方法等价于.unbind('click')，因为这个函数现在只会运行一次，再也不会运行了。
重新阅读问题（或者更确切地说是 cmets），他希望它运行的次数与点击次数相同。所以忽略我的尝试......

【解决方案3】：

您可以查看运行的最后日期，如果不到半秒前取消：

jQuery(document).ready(function() {
    jQuery('a.slide_circ').each(function() {
        var lastRun = null;

        $(this).click(function() {
            if(lastRun && new Date() - lastRun < 500) {
                // Less than 500ms; ignore.
                return false;
            }

            // Set the last run:
            lastRun = new Date().getTime();

            // Continue:
            do_all_functions();
            return false; 
        });
    });
});

它的优点是效率更高。

【讨论】：

它不适用于多个a.slide_circ 元素。它们会相互冲突。