4

jQuery 1.8 を使用しています。

ユーザーが特定の製品に関する情報を取得するためにチェックできる一連のチェックボックスがあります。チェックボックスをオンにすると、関数が呼び出され、製品情報が div に読み込まれます。現在、関数は各クリックの直後に起動します。したがって、訪問者が 5 つのボックスすべてにチェックを入れると、ajax 呼び出しが 5 回行われます。

私が欲しいのは、訪問者がクリックをやめると、一定時間後に関数が起動することです。関数は 1 回だけ起動する必要があります。遅延の目的は、呼び出しの数を制限し、よりスムーズなユーザー エクスペリエンスを作成することです。

ここに私の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

setTimeout with clearTimeout はこれを達成します。クリックするたびに

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 に答える
0

別のライブラリを追加することが許可されている場合。

アンダースコアには、必要なものにぴったり合うデバウンス機能があります。

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

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

```

于 2017-05-10T17:10:24.860 に答える
0

私はあなたがそれをここに置く必要があると思う

$Checkbox.click(getProductInfo);

次のようにする必要があります：実際の例はこちらです-> http://jsbin.com/umojib/1/edit

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