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

我有一个使用jQuery .click事件的锚来启动一些function。

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

这是代码简而言之。它按需工作,每次点击锚类slide_circ都会启动do_all_functions。

但我有一个问题。 如果用户进行双击,他们会运行2次或更多次的function……而且这个想法会变成地狱。

我认为我需要在某种程度上禁用双击或在我的函数上设置超时,以便每次都不运行。 谁能帮我 ?

使用.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; }); }); 

有几种方法,但有一种方法是:

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

不完美,但它会奏效。

您可以检查运行的最后日期,如果不到半秒,则取消:

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

它具有更高效的优点。