阻止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);
    }
});

工作實例