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毫秒。这样，在用户停止点击500毫秒之前，ajax永远不会触发。

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

这里的工作示例： http://jsfiddle.net/Th9sb/

Answer 4

在ajax请求完成之前，是否可以禁用复选框？

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

我想你必须把它放在这里

$Checkbox.click(getProductInfo);

它应该是这样的：工作示例在这里 - ＆gt; http://jsbin.com/umojib/1/edit

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

Answer 6

如果允许您添加其他库。

下划线具有去抖功能，非常适合您想要的效果。

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

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

```

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

6 个答案: