How to delay ajax call on keypress?

Question

I have an input box where I'm doing an AJAX GET to check if the email is within my database. I'm simply checking for an email address and if it's within the database, we retrieve true/else false. So depending on the return I display either a tick or cross image.

$.ajax({
    url: '/api/user/emailaddress/' + emailAddress,
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        if (data===true) {
            $(".email-address-validator").removeClass("success");
            $(".email-address-validator").addClass("error");
            }
        }
});

Each time a key is pressed within the input box field, this gets called. The problem that I thought might prop up is if someone looks at this file and see's that I'm doing an AJAX GET request on the field that they might just keep pressing keys on that particular input box.

Q: How can I set a timeout on this, for around 5 seconds so a user doesn't just keep spamming the box?

http://stackoverflow.com/a/3015351/1385672 - Here's an example of how to set/clear time out. You can just incorporate it into your keyup function and put your ajax call inside the timeout function — wirey00, May 20 '16 at 13:30
If you add a timeout client side, this won't prevent a malicious user to spam your server by doing the requests by himself. You should add some server side logic as well. — Regis Portalez, May 20 '16 at 13:41

score 0 · Answer 1 · answered May 20 '16 at 14:29

You could set a flag to handle this scenario. Something like this is much better than a timer.

var waitingForResponse= false;
function isValidEmail () {
    if (!waitingForResponse) {
        waitingForResponse = true;
        $.ajax({
            url: '/api/user/emailaddress/' + emailAddress,
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                waitingForResponse= false;
                if (data===true) {
                    $(".email-address-validator").removeClass("success");
                    $(".email-address-validator").addClass("error");
                }
            }
        });
    }
}

This design pattern will prevent subsequent requests until the first response is received. If you need a further interval between requests than this suggestion, then you can wrap the waitingForResponse flag in a setTimeout function inside the success callback. Like so:

var waitingForResponse= false;
function isValidEmail () {
    if (!waitingForResponse) {
        waitingForResponse = true;
        $.ajax({
            url: '/api/user/emailaddress/' + emailAddress,
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                setTimeout(function () {
                    waitingForResponse= false;
                }, 5000);
                if (data===true) {
                    $(".email-address-validator").removeClass("success");
                    $(".email-address-validator").addClass("error");
                }
            }
        });
    }
}

How to delay ajax call on keypress?

1 Answers1