How to create delay before ajax call?

Question

I am using jQuery 1.8.

I have a series of checkboxes that a user can check to get information on particular product. When the box is check, a function is called and loads the product info into a div. CURRENTLY, the function fires immediately after each click. So, if the visitor checks all five boxes, the ajax call will be made five times.

What I want is for the function to fire after a certain period of time once the visitor stops clicking. The function should fire only once. The purpose of the delay is to limit the number of calls and create a smoother user experience.

Here is my HTML:

<input type='checkbox' class='SomeClass' data=prodid='1'> 1 
<input type='checkbox' class='SomeClass' data=prodid='2'> 2
<input type='checkbox' class='SomeClass' data=prodid='3'> 3
<input type='checkbox' class='SomeClass' data=prodid='4'> 4
<input type='checkbox' class='SomeClass' data=prodid='5'> 5
<div id='ProductInfoDiv'></div>

Here is my pseudo JavaScript:

// set vars
$Checkbox = $('input.SomeClass');
$ProductInfoDiv = $('div#ProductInfoDiv');

// listen for click
$Checkbox.click(getProductInfo);

// check which boxes are checked and load product info div
getProductInfo = function() {

    // create list of product id from boxes that are checked
    var QString = $Checkbox.filter(":checked");

    // LOAD THE PRODUCT DIV
    $ProductInfoDiv.load('SomePage.cfm?'+QString);

}

So, where do I put the delay? How do ensure that the function only fires ONCE?

Same problem: http://stackoverflow.com/questions/2410937/delaying-actions-between-keypress-in-jquery. What you are looking for is often referred to as *debouncing*. jQuery plugin: http://benalman.com/projects/jquery-throttle-debounce-plugin/ (might be outdated though). — Felix Kling, Nov 20 '12 at 19:44

score 8 · Accepted Answer · answered Nov 20 '12 at 19:38

8

setTimeout with clearTimeout will accomplish this. Each click would do

var timeout = null;

$(element).click(function(){
    if(timeout)
    {
        clearTimeout(timeout);
    }

    timeout = setTimeout([some code to call AJAX], 500);
})

On each click, if there is a timeout it is cleared and restarted at 500 milliseconds. That way, the ajax can never fire until the user has stopped clicking for 500 milliseconds.

answered Nov 20 '12 at 19:38

Scott S

2,696
16
20

Almost, you're brackets and tabs are off slightly. – Kevin B Nov 20 '12 at 19:40

score 3 · Answer 2 · answered Nov 20 '12 at 19:38

// set vars
$Checkbox = $('input.SomeClass');
$ProductInfoDiv = $('div#ProductInfoDiv');

// listen for click
$Checkbox.click(getProductInfo);
var timeout;
var timeoutDone = function () {
    $ProductInfoDiv.load('SomePage.cfm?'+QString);
}
// check which boxes are checked and load product info div
getProductInfo = function() {

    // create list of product id from boxes that are checked
    var QString = $Checkbox.filter(":checked");

    // LOAD THE PRODUCT DIV
    clearTimeout(timeout);
    timeout = setTimeout(timeoutDone, 4000);

}

lostsource · Answer 3 · 2012-11-20T20:38:11.307

3

var clickTimer = false;

// listen for click
$Checkbox.click(function(){
   if(clickTimer) { 
      // abort previous request if 800ms have not passed
      clearTimeout(clickTimer);
   }

   clickTimer = setTimeout(function() {
       getProductInfo();
   },800); // wait 800ms
});

Working example here: http://jsfiddle.net/Th9sb/

edited Nov 20 '12 at 20:38

answered Nov 20 '12 at 19:38

lostsource

21,070
8
66
88

This won't solve the issue. It will still call getProductInfo after 200ms after every checkbox – Max Nov 20 '12 at 19:39
1

I think you want to pull the `if(clickTimer)` check out of the setTimeout callback. It will always be true in your case, because it only gets fired in the setTimeout callback, which means `clickTimer` must be set. – Matt Nov 20 '12 at 19:44
Imagine you have the click events, A, B, C. If all of them happen very quickly, A's timeout callback will cancels C's timeout, but B will still be executed. Or B is canceled and C is executed... not an optimal solution. The current event handler should cancel past timeouts, not vice versa. – Felix Kling Nov 20 '12 at 19:46

score 1 · Answer 4 · answered Nov 20 '12 at 19:53

Would it be possible to disable the checkboxes until the ajax request has been completed?

$('.SomeClass').on('click', function(e) {
    $('.SomeClass').attr('disabled', true);

    //-- ajax request that enables checkboxes on success/error
    $.ajax({
        url: "http://www.yoururl.com/",
        success: function (data) {
            $('.SomeClass').removeAttr('disabled');
        },
        error: function(jqXHR, textStatus, errorThrown) {
            $('.SomeClass').removeAttr('disabled');
        }
    });
});

Yes, that would be possible and might be a good idea in some cases. In this case, it's not a good idea at all. Odds are, the user will WANT multiple boxes checked. And the boxes are very close to each other. I appreciate the idea though. — Evik James, Nov 20 '12 at 19:59

Jai · Answer 5 · 2012-11-20T19:50:58.873

0

i think you have to put it here

$Checkbox.click(getProductInfo);

it should be like this : working example is here--> http://jsbin.com/umojib/1/edit

$Checkbox.one("click", function() {
  setTimeout(function() {
   getProductInfo();
  },200);
});

edited Nov 20 '12 at 19:50

answered Nov 20 '12 at 19:38

Jai

74,255
12
74
103

score 0 · Answer 6 · answered May 10 '17 at 17:10

0

If you are allowed to add another library.

Underscore has a debounce function which fits perfect on what you want.

function callback(){
    // some code to call AJAX
}

$(element).click(_.debounce(callback, 500))

```

answered May 10 '17 at 17:10

LuisRBarreras

1
3

How to create delay before ajax call?

6 Answers6