Keyup 事件挂断了我的笔记本电脑（我的键盘卡住了）

Question

我正在使用 ajax 检查我的电子邮件 ID database.I 我正在使用 keyUp 事件实时检查它。它工作正常，但我的键盘收到 stuck.Please 建议

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

您不应该使用 async:false, 它将异步调用转换为同步调用，ajax 实现不需要同步调用。

在你的情况下，因为你没有任何用于在特定时间过去后触发某些事件的去抖动方法。超时可用于创建去抖动。如：

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

对于每个按键，都会调用回调方法，这是它的主要原因。取而代之的是，您可以使用去抖动，它会在某些 interval.Check 之后使用下划线 js 调用此 link： 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));

Keyup 事件挂断了我的笔记本电脑（我的键盘卡住了）

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

performance

jquery

onkeyup

keyup