Keyup event is hanging up my laptop ( My keyboard got stuck )

Question

I am using ajax to check the email id in my database.I am using keyUp event to check it realtime. It's working fine but my keyboard is getting stuck.Please suggest

$("#email").on("keyup",function(){ });

$("#email").on("keyup",function(){
          // now check if email id is changed
            var e= $("#email").val();
            if(e!="<?=$user_info[0]['user_email']?>" && e!=""){
                   $.ajax({
                    url:"<?=URL?>users/check-user-email",
                    type:'get',
                    async:false,
                    data:{email:e},
                    success:function(resp){
                      console.log(resp);
                      if(resp=="Email exists"){
                        $("#emailerror").css({'display':'block'});
                        $("#submit").prop("disabled",true);
                      
                      }else{
                         $("#emailerror").css({'display':'none'});
                          $("#submit").prop("disabled",false);
                        
                      }
                    }
                });
            }
 });

Answer 1

You should not use async:false, it makes a asynchronous call to a synchronous call, which is not required for ajax implementation.

In your case because you don't have any debounce methodology which is used to fire some event after specific time passed. Timeout can be used to create a debounce. Such as:

var time;
$("#email").on("keyup", function() {
  if (time) {
    clearTimeout(time); // <----clears the timeout for every stroke but **last**.
  }// so if you keyup for "abc" then call for 3rd stroke initialized for the word "abc".
  time = setTimeout(function() {
    // now check if email id is changed
    var e = $("#email").val();
    if (e != "<?=$user_info[0]['user_email']?>" && e != "") {
      $.ajax({
        url: "<?=URL?>users/check-user-email",
        type: 'get',
        //async: false, // <-------remove it or comment out.
        data: {
          email: e
        },
        success: function(resp) {
          console.log(resp);
          if (resp == "Email exists") {
            $("#emailerror").css({
              'display': 'block'
            });
            $("#submit").prop("disabled", true);

          } else {
            $("#emailerror").css({
              'display': 'none'
            });
            $("#submit").prop("disabled", false);

          }
        }
      });
    }
  }, 500); // <----you can register for more than 500 ms.
});

Answer 2

For every keyup the callback method is called which is the main reason for it. Instead of this you can use debounce which would call after certain interval.Check out this link using underscore js: http://underscorejs.org/#debounce

var someFunction = function (){
      // now check if email id is changed
        var e= $("#email").val();
        if(e!="<?=$user_info[0]['user_email']?>" && e!=""){
               $.ajax({
                url:"<?=URL?>users/check-user-email",
                type:'get',
                async:false,
                data:{email:e},
                success:function(resp){
                  console.log(resp);
                  if(resp=="Email exists"){
                    $("#emailerror").css({'display':'block'});
                    $("#submit").prop("disabled",true);

                  }else{
                     $("#emailerror").css({'display':'none'});
                      $("#submit").prop("disabled",false);

                  }
                }
            });
        }
}

$("#email").on("keyup", _.debounce(someFunction, 1000, true));