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, f.e. this 450ms? Thx for help.

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, f.e. this 450ms? Thx for help.

• javascript
• jquery
• timeout
• append

Share Follow edited Jan 23, 2013 at 8:59 Tomas Ramirez Sarduy 17.5k88 gold badges7272 silver badges8686 bronze badges asked Jan 23, 2013 at 8:51 LukasLukas 7,7542020 gold badges7979 silver badges127127 bronze badges 1

• have a read of Using .one() with .live() jQuery – Adam Tomat Commented Jan 23, 2013 at 8:57

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

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

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/xhSvC/

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

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

http://benalman./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();
    });
});

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

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