在Ajax調用後添加延遲到JQuery keyup（）

Question

我遇到了一個相當棘手的問題，我不確定如何處理它。我在一行中有幾個文本框，我需要填寫這些文本框。每次填充文本框時，我都會抓取該值並進行使用該值的Ajax調用。響應決定了該文本框的顏色是紅色還是綠色（使用Jquery css（）函數）。

現在是這個問題。假設我有5個文本框連續排列。比方說，我輸入1 - 標籤，2 - 標籤，2 - 標籤，1 - 標籤，1 - 標籤。所有這一切都非常快。例如，1選項卡意味着我輸入1，然後按Tab鍵移動到下一個文本框。我意識到，如果我的速度太快，一些文本框不會更新，並且它們的顏色不會改變。我認爲這是由於阿賈克斯花了一些時間來處理。

我想到了這個問題，想出了一個可以解決問題的想法。這是在每個Ajax調用之後添加一個延遲，然後再切換到下一個。我在S.O周圍搜索，發現this solution。然而，它並不是真的爲我工作（基本上它打破了，JS根本不工作）。

這是我的AJAX片段。我將其剝離並刪除了不必要的代碼段。

$(".myTextbox").keyup(function() { 
     //Defining my variables here 

     $.ajax({  
      //Perform First Ajax request 

      $.ajax({ 
       //Perform Second Ajax Request 
      }); 

     }); 
}); 

這是我使用的是什麼，我從S.O試圖找到解決方案，但它不工作。

var timer = null; 
$(".myTextbox").keyup(function() { 
     clearTimeout(timer); 

     timer = setTimeout(
      function(){ 
       .ajax({  
       //Perform First Ajax request       
        $.ajax({ 
         //Perform Second Ajax Request 
        });     
       }); 
      }, 200); 
     //Defining my variables here 
}); 

現在，有2個選項：

1. 我的邏輯是錯誤的關於推遲tab鍵。有沒有更好的邏輯來克服我最初的問題？

2. 我在錯誤地使用上面發佈的解決方案。

希望得到一些建設性的答案。

謝謝。

編輯：這是完整的代碼，根據要求。

$(".getqty").keyup(function() { 
    var split = this.id.split(":"); 
    var color = split[0]; 
    var size = split[1]; 
    var prodID = split[2]; 
    var $this = $(this); 
    var value = $this.val(); 
    var stock = 0; 
    var price = split[3]; 
    var originalProd = split[4]; 
    var dataStock = $this.attr("data-stock"); 
    if(value.length > 0){ 
     value = parseInt(value); 
    }else{ 
     value = ""; 
    } 

    $.ajax({ //create an ajax request 
     type: 'POST', 
     url: 'includes/add.php',    
     dataType: 'html', //expect html to be returned 
     data:'color='+color+'&size='+size+'&prodID='+prodID+'&qty='+value+'&originalProd='+originalProd+'&dataStock='+dataStock,  
     success: function(response){ 
      if(response == "breakOut"){    
        $this.css('background-color', '#F87171').css('border', '1px solid #B42C2C'); 
        $("#"+originalProd+"-"+color).text("Not enough in stock.").css('color', '#B42C2C'); 
        $("#"+originalProd+"-totalPrice").text(""); 
      }else{ 
       stock = response; 
       if((value > 0 && value <= stock) || (value > 0 && dataStock == 'yes')){ 
         $this.css('background-color', '#66CF66').css('border', '1px solid #277230');       
       }else{ 
        $this.css('background-color', '#fff').css('border', '1px solid #ccc'); 
       } 

       var count = 0; 
       $("."+color+"-" + originalProd).each(function(){ 
         if($(this).val() == 0){ 
          count = count + 0; 
         }else{ 
          count = count + parseFloat($(this).val(), 10); 
         } 
       }); 

       //Single Item Total 
       if(count > 0){ 
        var totalPrice = (price * count).toFixed(2); 
        $("#"+originalProd+"-"+color).text(count + " - " + totalPrice.toString().replace(/\./g, ',') + " Eur").css('color', '#CCC'); 
       }else{ 
        $("#"+originalProd+"-"+color).text(""); 
       } 


       $.ajax({ //create an ajax request 
        type: 'POST', 
        url: 'includes/cart.php',    
        dataType: 'html', //expect html to be returned 
        success: function(response){     
         if(response > 0){ 
          $("#cart_price").text("Cart: "+response.toString().replace(/\./g, ',')+ " Eur"); 
         }else{ 
          $("#cart_price").text("Cart:0,00 Eur"); 
         }        
        }, 
        error:function (xhr, ajaxOptions, thrownError){ 
        // alert(thrownError); 
        } 
       }); 
       if(pathname == 'mycart.php'){ 
        location.reload(); 
       }     
      } 
     }, 
     error:function (xhr, ajaxOptions, thrownError){ 
     //alert(thrownError); 
     } 
    }); 

Answer 1

您應該使用的變化，而不是事件的KEYUP。從文檔：

當用戶釋放鍵盤上的鍵時，鍵入事件被髮送到元素。它可以附加到任何元素，但事件僅發送到具有焦點的元素 。

當你按Tab鍵時，你的元素將快速改變焦點，也許不會爲具有正確值內容的輸入文本觸發按鍵事件。

所以嘗試：

$(".getqty").change(...) 

更新： 由於在輸入文本失去焦點更改事件只是觸發，你可以代替寫：

$(".getqty").on('input', function() { 
    var $this = $(this); 
    var value = $this.val(); 

    if (value.length > 0) { 
    value = parseInt(value); 
    } 
    else { 
    value = ""; 
    } 

    $.ajax({ 
    type: 'POST', 
    url: 'data.txt',    
    dataType: 'text', 
    success: function(response){ 
     $this.css('background-color', '#66CF66').css('border', '1px solid #277230');       

     $.ajax({ 
     type: 'POST', 
     url: 'data.txt',    
     dataType: 'text', 
     success: function(response){     
      $("#cart_price").text("Cart: "+response.toString().replace(/\./g, ',')+ " Eur");       
     }, 
     error:function (xhr, ajaxOptions, thrownError){ 
      console.log(thrownError); 
     } 
     });     
    }, 
    error: function (xhr, ajaxOptions, thrownError){ 
    console.log(thrownError); 
    } 
    }); 
}); 

或用純JavaScript事件監聽器：

var elemList = document.getElementsByClassName('getqty'); 
for (var i = 0; i < elemList.length; i++) { 
    elemList[i].addEventListener('input', function(e) { 
    var $this = $(e.target); 
    var value = $this.val(); 

    if (value.length > 0) { 
     value = parseInt(value); 
    } 
    else { 
     value = ""; 
    } 

    $.ajax({ 
     type: 'POST', 
     url: 'data.txt',    
     dataType: 'text', 
     success: function(response){ 
     $this.css('background-color', '#66CF66').css('border', '1px solid #277230');       

     $.ajax({ 
      type: 'POST', 
      url: 'data.txt',    
      dataType: 'txt', 
      success: function(response){     
      $("#cart_price").text("Cart: "+response.toString().replace(/\./g, ',')+ " Eur");       
      }, 
      error:function (xhr, ajaxOptions, thrownError){ 
      console.log(thrownError); 
      } 
     });     
     }, 
     error: function (xhr, ajaxOptions, thrownError){ 
     console.log(thrownError); 
     } 
    }); 
    }); 
} 

Answer 2

你可以試試這個對KEYUP

延遲

$('input').keyup(function() { 
    delay(function(){ 
     alert('Time elapsed!'); 
    }, 1000); 
});