如何使用jQuery单击仅一次附加数据

Question

所以，我有这个小功能：

carousel_controls_buttons.live('click', function(e){
    setTimeout(function(){
       info_board_span.append(info_board_description);
       e.preventDefault();
    }, 450);
});

我想做的是在两次，三次快速单击后停止一次附加info_board_description 。 当我执行此操作时，此数据会追加一次以上，并且内容重复。 我如何才能在450毫秒内停止此操作？ 谢谢。

Answer 1

使用布尔值来控制它。

var flag = true;
carousel_controls_buttons.live('click', function(e){
    e.preventDefault();
    if (flag) {
       setTimeout(function(){
           info_board_span.append(info_board_description);
           flag = true;
       }, 450);
       flag = false;
    }
});

Answer 2

您可以使用clearTimeout函数：

var t = '';
carousel_controls_buttons.live('click', function(e){
    clearTimeout(t);
    t = setTimeout(function(){
          info_board_span.append(info_board_description);
          e.preventDefault();
    }, 450);
});

示例： http ： //jsfiddle.net/xhSvC/

请注意，不建议使用live方法，而应使用on方法。

Answer 3

虽然其他答案应该起作用，但我想向您介绍debounce和throttle的概念。

http://benalman.com/projects/jquery-throttle-debounce-plugin/是您可以用来实现所需功能的一个插件，即确保某个功能每x秒执行一次。

油门与反跳

节流和反跳都会限制函数的执行速度，但是哪种方法适合给定情况？

好吧，简单地说：尽管限制将函数的执行限制为每延迟毫秒不超过一次，但反跳保证了该函数将只执行一次（给定阈值）。

carousel_controls_buttons.live('click', function(e) {
    $.debounce(450, function() {
       info_board_span.append(info_board_description);
       e.preventDefault();
    });
});

Answer 4

把一个数放在那儿说var count = 0; 命中时递增，如果count == 1则检查条件，如果不保留则附加条件

Answer 5

有一个事件可以实现这一目标：

carousel_controls_buttons.one('click', function() {
  setTimeout(function(){
       info_board_span.append(info_board_description);
       e.preventDefault();
    }, 450);
});