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