Событие Keyup зависает на моем ноутбуке (Моя клавиатура застряла)

Я использую ajax для проверки идентификатора электронной почты в моей базе данных. Я использую событие keyUp, чтобы проверить его в реальном времени. Он работает нормально, но моя клавиатура застревает. Пожалуйста, предложите

$("#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);
                        
                      }
                    }
                });
            }
 });


person Anil Sharma    schedule 30.12.2016    source источник


Ответы (2)


Вы не должны использовать async:false,, он делает асинхронный вызов синхронному вызову, который не требуется для реализации ajax.

В вашем случае, потому что у вас нет какой-либо методологии устранения отказов, которая используется для запуска какого-либо события по прошествии определенного времени. Тайм-аут может быть использован для создания debounce. Такие как:

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.
});
person Jai    schedule 30.12.2016

Для каждой клавиши вызывается метод обратного вызова, что является основной причиной этого. Вместо этого вы можете использовать debounce, который будет вызываться через определенный интервал. Проверьте эту ссылку, используя подчеркивание 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));
person Debabrata Mohanta    schedule 30.12.2016