How to create a delay before ajax call?

Question

I am using jQuery 1.8.

I have a number of checkboxes that the user can check to get information about a specific product. When the field is checked, the function is called and loads the product information into the div. Currently, the function is triggered immediately after each click. So, if a visitor checks all five mailboxes, ajax call will be made five times.

I want the function to work after a certain period of time when the visitor stops clicking. The function should be triggered only once. The goal of the delay is to limit the number of calls and create a smoother user interface.

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 can I put a delay? How to ensure that the function works only once?

Answer 1

setTimeout with clearTimeout will do this. Every click will do

 var timeout = null; $(element).click(function(){ if(timeout) { clearTimeout(timeout); } timeout = setTimeout([some code to call AJAX], 500); }) 

Each time you press, if there is a timeout, it clears and restarts after 500 milliseconds. Thus, ajax cannot fire until the user stops pressing for 500 milliseconds.

Answer 2

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

Answer 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: http://jsfiddle.net/Th9sb/

Answer 4

Is it possible to disable the checkboxes until the ajax request is complete?

 $('.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'); } }); }); 

Answer 5

I think you should put it here

 $Checkbox.click(getProductInfo); 

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

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

Answer 6

If you are allowed to add another library.

The underline has a debounce function, which is perfect for what you want.

 function callback(){ // some code to call AJAX } $(element).click(_.debounce(callback, 500)) 

`` ``