如何在ajax调用之前创建延迟？

Question

我正在使用jQuery 1.8.

我有一系列复选框,用户可以检查这些复选框以获取有关特定产品的信息.检查框时,会调用一个函数并将产品信息加载到div中.目前,每次点击后该功能立即触发.因此,如果访问者检查所有五个框,则将进行五次ajax调用.

我想要的是,一旦访问者停止点击,该功能将在一段时间后触发.该功能只能触发一次.延迟的目的是限制呼叫次数并创建更流畅的用户体验.

这是我的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>

这是我的伪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);

}

那么,我在哪里延迟？如何确保该功能仅触发ONCE？

Answer 1

使用clearTimeout的setTimeout将完成此操作.每次点击都可以

var timeout = null;

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

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

每次单击时,如果超时,则清除并在500毫秒重新启动.这样,ajax永远不会触发,直到用户停止点击500毫秒.