阻止延遲觸發的jQuery鍵盤輸入

Question

我試圖創建一個電子郵件驗證字段，該字段在電子郵件不符合標準時顯示錯誤消息。爲此，我使用鍵盤作爲事件，因此只要用戶輸入錯誤的電子郵件，郵件就會顯示出來。

但是這種方式每次用戶輸入一個字符消息顯示，所以我想我會添加一個延遲，並找到一個函數，但這確實會增加一個延遲，但仍然顯示每次消息觸發。

有人知道如何確保事件只在用戶停止一段時間後才被調用嗎？

JSFiddle

<table> 
    <tr> 
     <td>Email</td> 
     <td> 
      <input type="text" class="email" value="supplier@supplier.com"> 
     </td> 
     <td><span class="message"></span></td> 
    </tr> 
</table> 

function isEmail(email) { 
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
    return regex.test(email); 
} 

$('.email').on('keyup', function() { 
    var delay = (function() { 
     var timer = 0; 
     return function(callback, ms) { 
      clearTimeout(timer); 
      timer = setTimeout(callback, ms); 
     }; 
    })(); 

    var email = $('.email').val(); 
    $(this).closest('tr').find('.message').hide(); 

    if (isEmail(email) == false) { 
     delay(function() { 
      $('.email').closest('tr').find('.message').hide().html('Invalid email.').fadeIn('fast'); 
     }, 1000); 
    } else { 
     $(this).closest('tr').find('.message').hide(); 
    } 
}); 

Answer 1

你超時的邏輯是在上面一點點瑕疵。請注意，允許用戶在第一次沒有驗證的情況下輸入他們的電子郵件的更好的方法是檢查輸入模糊的電子郵件的有效性。如果您想要，您可以在第一次模糊事件之後的每次按鍵後檢查電子郵件的有效性。事情是這樣的：？

function checkEmailValidity($el) { 
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
    var $msg = $el.closest('tr').find('.message').hide(); 
    if (!regex.test($el.val())) 
     $msg.html('Invalid email.').fadeIn('fast'); 
} 

var timer;  
$('.email').on({ 
    blur: function() { 
     $(this).data('hasBlurred', true); 
     checkEmailValidity($(this)); 
    }, 
    keyup: function() { 
     clearTimeout(timer); 
     timer = setTimeout(function() { 
      $(this).data('hasBlurred') && checkEmailValidity($(this)); 
     }.bind(this), 250); 
    } 
}); 

Working example