1

ボタンがあります。このボタンをクリックして$.post()リクエストを送信し、アイテムをバスケットに追加します。ユーザーがボタンを 10 回高速でクリックした場合、10 回のリクエストを送信してはならず、幅が 10 カウントされるのは 1 つだけです。次のようなコード:

<div class='qty'>
<input type='text' id="qty" value='1'>
<a class='button' href='#'>add To Basket</a>

</div>

脚本：

$(document).ready(function(){

  $(".button").click(function(){

    var qty=$(this).parent().find(input[type='text']).val();

    $.post('/ajax.php', "qty="+qty, function(){
      $(this).parent().find(input[type='text']).val("1");

    });

  });

});
4

5 に答える 5

2

クリックを変数に保存し、各クリックの後、最終的な投稿を行う前に少し待つ必要があります。
これは埋め込みの例です。ユーザーがクリックするたびに、もう一度クリックするためにさらに 100 ミリ秒が与えられ、それが合計クリック数に追加されます。最後のクリックのみが投稿イベントを発生させ、その後、クリックは 0 にリセットされます
。投稿中は、それ以上のクリックを防止するためにボタンが無効になります。

$(document).ready(function(){
    var clicks = 0;
    var timeoutId = 0;
    // putting the post in a separate function prevents unnecessary closures 
    var doPost = function(){
        $(".button").attr("disabled", "disabled");
        $.post('/ajax.php', "qty="+clicks, function(){
            $(this).parent().find(input[type='text']).val("1");
            clicks = 0;
            $(".button").removeAttr("disabled");
        });
    };
    $(".button").click(function(){
        clearTimeout(timeoutId);
        timeoutId = setTimeout(doPost, 100);
        clicks++;
    });
});
于 2012-12-19T19:20:57.807 に答える
2

これは基本的なデバウンスの問題です。次のように変更<input id="qty">し<input class="qty">ます。

$('.button').click(function(e) {
    var btn = $(this), qty = btn.parent().find('.qty');

    clearTimeout(btn.data('timeout'));

    qty.val(qty.val()+1);

    btn.data('timeout', setTimeout(doPost(qty), 1000));
});

function doPost(el) {
     return function() {
         $.post('/ajax.php', {qty:el.val()});
     }
}
于 2012-12-19T19:23:39.920 に答える
0

「速い」とはどういう意味ですか? おそらく、アンダースコアのdebounceようなタイマー関数を使用したいでしょう(アンダースコア全体を含めたくない場合は、それを切り取ってスタンドアロンで使用できます):

<div class='qty'>
   <input type='text' id="qty_num" value='1'>
   <a class='button' id="qty_add" href='#'>add To Basket</a>
   <output id="qty_out">0</output><label for="qty_out"> items in basket</label>
</div>

$(document).ready(function() {
    var count = 0;
    function send() {
        $.post('/ajax.php', {qty: count}, function(result){
            $("#qty_out").val(result);
        });
        count = 0; // reset
    }
    var sendAfterSecond = _.debounce(send, 1000); // here
    $("#qty_add").click(function(e) {
         var num = parseInt($("#qty_num").val());
         count += num;
         sendAfterSecond();
    });
});
于 2012-12-19T19:27:23.937 に答える
0

(値を直接送信する代わりに)を呼び出すハンドラーで、短い時間 (1 秒など) タイムアウトを設定できます。タイムアウト ハンドラは、すべての実行に対してグローバルに変数に保存する必要があります。さらに、すべての実行で、前のタイムアウトがまだアクティブかどうかを確認する必要があります。そうである場合は、古いタイムアウトを強制終了し、新しいタイムアウトをセットアップします。そうでない場合は、新しくセットアップしてください。.button#onclick$.post().button#onclick.button#onclick

したがって、ボタンをクリックするたびに、古いタイムアウトが強制終了され、新しいタイムアウトが設定されます。最後のクリックの setTimeout コード本体のみが実行されます。

于 2012-12-19T19:20:15.017 に答える
-2 
$(document).ready(function(){

    $(".button").click(function(){

    // disable the button
    $(this).attr("disabled", "disabled"); // if its a submit button

    var qty=$(this).parent().find(input[type='text']).val();

    // request some thing back in json {"success":1} or 0 if failed to add to cart.
    $.post('/ajax.php', "qty="+qty, function(m){ 
            if(m.success==1)
            {
                // enable the button
                $(".button").removeAttr("disabled"); // if its a submit button
            }

            $(this).parent().find(input[type='text']).val("1");
        },"json");

    });

});
于 2012-12-19T19:13:52.160 に答える