jquery優化ajax請求？ php和js

我有按鈕。點擊此按鈕發送$.post()請求並添加項目到購物籃。我想，如果用戶點擊按鈕快十倍，它不能發送10個請求，但只有一個寬度計數10 這樣的代碼：jquery優化ajax請求？ php和js

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

    }); 

    }); 

});

來源

2012-12-19 Zokir Najimiddinov

請縮進！ – Bergi

不要自己構建查詢字符串，將對象傳遞給jQuery並讓它爲您執行。 – Brad

假設你將有多個'qty'輸入，你不能爲它們中的每一個使用相同的'id'。 – josh3736

-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-19 19:13:52

這不是OP所要求的，這只是簡單地禁用了按鈕 –

您可以在.button#onclick處理程序中調用$.post()（而不是直接發佈值）一些很短的時間（例如1秒）setTimeout處理程序。超時處理程序必須全局保存到變量中，以執行所有.button#onclick執行。此外，每個.button#onclick執行都必須檢查previos超時是否仍然有效。如果是，請殺死舊的超時時間並設置新的超時時間。如果沒有，只需設置新的。

所以每個按鈕點擊都會殺死舊超時並設置新的超時。只有最後點擊的setTimeout代碼體纔會被執行。

來源

2012-12-19 19:20:15

您需要將點擊保存在變量中，並在每次點擊後等待一小段時間，然後再進行最終發佈。
下面是一個植入示例，每次用戶單擊他時又有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-19 19:20:57

這是一個基本的去抖問題。更改<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-19 19:23:39 josh3736

我不會在嚴格的單詞中將這個反彈稱爲，因爲您實際上想要註冊發生的每次推送。 –

@ WillemD'haeseleer，我們正在剔除請求，而不是按鈕點擊。 – josh3736

這是真的！我只是擡頭看看實際上的反彈意味着什麼，並沒有想到它低谷，thx教我新的東西！ –

你說的「快」是什麼意思？也許你要使用像Underscore's 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-19 19:27:23 Bergi

jquery優化ajax請求？ php和js

回答

相關問題