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: ``` 1 2 3 4 5

``` Here is my pseudo JavaScript: ``` // set vars $Checkbox = $('inpu…

Accepted Answer

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.

How to create delay before ajax call?

Solution

Problem

Related problems