4

我正在使用 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);

}

那么，我该把延迟放在哪里呢？如何确保该功能只触发一次？

4

6 回答 6

8

带有 clearTimeout 的 setTimeout 将完成此操作。每次点击都会做

var timeout = null;

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

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

每次单击时，如果超时，它会被清除并在 500 毫秒后重新启动。这样，在用户停止点击 500 毫秒之前，ajax 永远不会触发。

于 2012-11-20T19:38:28.820 回答
3 
// 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);

}
于 2012-11-20T19:38:14.533 回答
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/

于 2012-11-20T19:38:20.040 回答
1

在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');
        }
    });
});
于 2012-11-20T19:53:42.630 回答
0

我想你必须把它放在这里

$Checkbox.click(getProductInfo);

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

$Checkbox.one("click", function() {
  setTimeout(function() {
   getProductInfo();
  },200);
});
于 2012-11-20T19:38:41.540 回答
0

如果您被允许添加另一个库。

Underscore有一个debounce功能，非常适合你想要的。

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

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

```

于 2017-05-10T17:10:24.860 回答