如何在使用jQuery单击后仅附加一次数据答案

【问题标题】：How to append data only one time after click with jQuery如何在使用jQuery单击后仅附加一次数据
【发布时间】：2013-01-23 08:51:00
【问题描述】：

所以，我有这个小功能：

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

我想要做的是在两次、三次快速点击后停止追加info_board_description 一次以上。当我这样做时，这些数据会附加一次以上，并且我有内容重复。我怎么能阻止这一段时间，f.e.这 450 毫秒？谢谢帮助。

【问题讨论】：

阅读Using .one() with .live() jQuery

标签： javascript jquery timeout append

【解决方案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;
    }
});

【讨论】：

每次点击后我都会加载 ajax 内容，我需要一个一个地附加这些内容，但是有一次，等待一段时间再附加另一个，所以这不是好方法，因为这会停止所有一个追加后我的 ajax 操作

【解决方案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 方法。

【讨论】：

这很好用，谢谢伙计，每次点击后我都会加载 soma ajax 内容，这是唯一正确的方法:) thx

【解决方案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();
    });
});

【讨论】：

【解决方案4】：

把一个计数放在那里说 var count=0;命中时递增，如果 count==1 则检查条件，如果不离开则追加

【讨论】：

【解决方案5】：

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

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

【讨论】：