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

Question

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

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

这是简短的代码.. 它按需要工作，每次点击锚类 slip_circ 都会启动 do_all_functions。

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

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

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

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

不完美，但它会起作用。

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

它的优点是效率更高一些。