Question

A function called “checkUsername” executes when I focusout of a input box with the id “regUsername”

$('#regUsername').focusout(function(){
    checkUsername();
});

The function:

function checkUsername(){
    var form_data = { username : $('#regUsername').val() };
    $.ajax({
        url: "/register/validateUsername",
        type: 'POST',
        data: form_data,
        success: function(msg) {
            var obj = $.parseJSON(msg);
        },
        error: function(data){
            dbdown();
        }
    });
}

Currently every time you focusout of the input box the ajax post function will run. This causes a slight flicker on returned validation box. I was wondering if it is possible to keep the last instance of the value which was passed in and then compare it with the new value passed in. If they are the same then there would be no need for an ajax post.

Any help on this would be much appreciated 🙂

Answer 1

Store it, if different call ajax and set new ‘lastValue’

var lastValue = "";
function checkUsername(){
    var curr = $('#regUsername').val(),
        form_data = { username : curr };
    if (lastValue !== curr) {
      $.ajax({
        url: "/register/validateUsername",
        type: 'POST',
        data: form_data,
        success: function(msg) {
            var obj = $.parseJSON(msg);
        },
        error: function(data){
            dbdown();
        }
     });
     lastValue = curr;
   }
}