如何使用jQuery檢查兩個輸入字段是否填寫並等待2秒

Question

當用戶輸入郵政編碼和門牌號時，我使用的API會獲得正確的街道名稱和位置。

目前我有以下布局：

<p class="form-row form-row form-row-wide address-field validate-required" id="billing_postcode_field" data-o_class="form-row form-row form-row-last address-field validate-required validate-postcode">
   <label for="billing_postcode" class="">Postcode<abbr class="required" title="required">*</abbr></label><input type="text" class="input-text " name="billing_postcode" id="billing_postcode" value="">
</p>
<p class="form-row form-row form-row-wide address-field validate-required" id="billing_housenumber_field" data-o_class="form-row form-row form-row-last address-field validate-required validate-postcode">
   <label for="billing_housenumber" class="">Huisnummer<abbr class="required" title="required">*</abbr></label><input type="text" class="input-text " name="billing_housenumber" id="billing_housenumber" value="">
</p>
<p class="form-row form-row form-row-wide address-field validate-required" id="billing_address_1_field">
   <label for="billing_address_1" class="">Adres<abbr class="required" title="required">*</abbr></label><input type="text" class="input-text " name="billing_address_1" id="billing_address" value="">
</p>
<p class="form-row form-row form-row-wide address-field validate-required" id="billing_city_field" data-o_class="form-row form-row form-row-wide address-field validate-required">
   <label for="billing_city" class="">Plaats<abbr class="required" title="required">*</abbr></label><input type="text" class="input-text " name="billing_city" id="billing_city" placeholder="" value="">
</p>

在ID為checkoutform的表單內。

我已經嘗試了以下方法：

tpj('#checkoutform').on('input', function() {
  var val1 = tpj('#billing_postcode').val();
  var val2 = tpj('#billing_housenumber').val();
  if (val1 > 0 && val2 > 0) {
    console.log('both filled in');
  } else {
    console.log('both not filled in');
  }
});

這將在兩個字段中的每個按鍵上顯示控制台中的日志。 最后，我想用ajax發布到進行api調用的PHP腳本，每天我得到的調用數量有限，所以這非常糟糕。

當我同時填寫兩個字段時，我只想發出1個請求，最好的做法是什么？

我當時想在兩個字段都填寫后等待1或2秒鍾，然后發布到腳本中。

我怎樣才能做到這一點？ （只有時間部分，我可以自己修復ajax）。

如果有人對我的想法有更好的建議，請這樣說。

Answer 1

這是一種方法：

1. 將超時功能設置為2000ms，並在其中檢查兩個輸入是否都具有值。 1.1。 如果它們具有值，請過帳表格。 1.2。 如果沒有，請重新設置超時功能。
2. 在輸入事件中，清除超時並重新設置2000ms-這將重置您的超時計數器。

所有這些將確保您每次輸入后始終等待至少兩秒鍾，並且還將繼續等待直到兩個輸入中都包含內容。

Answer 2

您無需等待2秒鍾，只需在用戶填寫表格時進行該事件即可。

$(function()
{
    $("#btn").on("click",function()
    {
        let inputOne = $("#inputOne").val();
        let inputTwo = $("#inputTwo").val();
        if (inputOne == "" || inputTwo == "")
        {
            alert("fill inputs");
        }
        else
        {
            // Ajax call goes here
        }
    })
})