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

Question

So, i have this little function:

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

What i'm trying to do is stop appending info_board_description more then one time after two, three fast clicks. When i do this this data appends more than one time and i have content duplication. How can i stop this for some time, fe this 450ms? Thx for help.

Answer 1

Use a boolean to control it.

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

You can use clearTimeout function:

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

example: http://jsfiddle.net/xhSvC/

Note that live method is deprecated, you should use on method instead.

Answer 3

While the other answers ought to work, I would like to introduce you to the concept of debounce & throttle .

http://benalman.com/projects/jquery-throttle-debounce-plugin/ is one plugin you may use to achieve what you need, ie, ensure a function is executed only once per x seconds.

Throttle versus debounce

Both throttling and debouncing will rate-limit execution of a function, but which is appropriate for a given situation?

Well, to put it simply: while throttling limits the execution of a function to no more than once every delay milliseconds, debouncing guarantees that the function will only ever be executed a single time (given a specified threshhold).

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

Answer 4

Put an count over there say var count=0; increment when hit and check for the condition if count==1 append it if not leave it

Answer 5

There is a one event for achieve this:

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