jQueryキーアップが遅れてトリガーされないようにします

Question

電子メールが規格に適合しない場合、エラーメッセージを表示する電子メール検証フィールドを作成しようとしています。このために私はイベントとしてkeyupを使用したので、ユーザーが間違った電子メールを入力するとすぐにメッセージが表示されます。

しかし、このようにユーザーがメッセージを表示するたびにメッセージが表示されるため、遅延を追加してこの機能を検出することができましたが、実際には遅延が追加されますが、メッセージが表示されるたびに表示されます。

ユーザーが特定の期間停止した後に初めてイベントが呼び出されるようにする方法を知っていますか？

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