JQuery合并了keyup和focusout两个函数

JQuery merge two functions keyup and focusout

本文关键字：两个 函数 focusout 合并 keyup JQuery      更新时间：2023-09-26

在表单字段上，我使用两个活动函数：keyup和focusout。这些函数执行相同的代码，只有按键使用延迟函数。

延迟功能：

$(function() {
    var delay = (function(){
    var timer = 0;
    return function(callback, ms){
      clearTimeout (timer);
      timer = setTimeout(callback, ms);
    };
  })();

按键和聚焦功能：

    $("#name").on('keyup', function (){
    var textn = $(this).val();
    var nbrCharn = textn.length;
          delay(function(){
                if(nbrCharn > '2'){ $('#nameMsg').html('Nice.'); 
                }else { $('#nameMsg').html(''); }
          }, 1000 );
    });
    $("#name").on('focusout', function (){
    var textn = $(this).val();
    var nbrCharn = textn.length;
          if(nbrCharn > '2'){ $('#nameMsg').html('Nice.'); 
          }else { $('#nameMsg').html(''); }
    });

keyup需要延迟，focusout则不需要。这段代码运行良好，但有可能合并这些函数，这样我就不会有两次相同的代码了吗？

您可以定义一个处理程序，该处理程序接受一个参数，该参数是一个完成函数

var handler = function (completion){
    return function(){
        var textn = $(this).val(),
            nbrCharn = textn.length;
        completion(function(){
                if(nbrCharn > '2'){ 
                     $('#nameMsg').html('Nice.'); 
                } else { 
                     $('#nameMsg').html(''); 
                }
        });
    };
};

然后定义处理程序

$("#name").on('keyup',handler(function(cb){delay(cb,1000);}));
$("#name").on('focusout',handler(function(cb){cb();}));

如果在一个处理程序中使用多个事件，请使用事件对象参数检查event.type

$("#name").on('keyup focusout', function (evt){
     if(evt.type === 'keyup'){
        /* keyup only code */
     }
});

或者类似的东西

 var delay = evt.type === 'keyup' ? 0 :1000;

然后对两个使用delay（）

您可以尝试将相关的jquery this对象传递给函数：

var delay =
(function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  }
)()
$(document).ready(init);
function init() {
  $("#name").on('keyup', function (){
    var self = this;
    delay(
      (function(self){
        return function(){ 
          writeNameMsg(self)
        };
      })(self)
    , 1000 );
  });
  $("#name").on('focusout', function (){
    writeNameMsg(this);
  });
}
function writeNameMsg(self){
  var textn = $(self).val();
  var nbrCharn = textn.length;
  if(nbrCharn > '2'){
    $('#nameMsg').html('Nice.');
  } else {
    $('#nameMsg').html(''); }
  }
};

一种简单的方法是在延迟后从另一个事件.trigger()：

$("#name").on('keyup', function (){
   var $this = $(this);
   setTimeout(function() {
       $this.trigger('focusout');
   }, 1000); // milliseconds
});

或者，对两者都使用外部回调函数，使用.call()传递与this:相同的元素

$("#name").on('keyup', function() {
   var el = this;
   setTimeout(function() { callbackFunc.call(el) }, 1000); // milliseconds
});
$("#name").on('focusout', callbackFunc);
相关文章：