How to create delay before ajax call?
<p>I am using jQuery 1.8.  </p>

<p>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.  </p>

<p>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.</p>

<p>Here is my HTML:</p>

<pre><code>&lt;input type='checkbox' class='SomeClass' data=prodid='1'&gt; 1 
&lt;input type='checkbox' class='SomeClass' data=prodid='2'&gt; 2
&lt;input type='checkbox' class='SomeClass' data=prodid='3'&gt; 3
&lt;input type='checkbox' class='SomeClass' data=prodid='4'&gt; 4
&lt;input type='checkbox' class='SomeClass' data=prodid='5'&gt; 5
&lt;div id='ProductInfoDiv'&gt;&lt;/div&gt;
</code></pre>

<p>Here is my pseudo JavaScript:</p>

<pre><code>// 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);

}
</code></pre>

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