Question

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

延迟功能：

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

keyup和focusout的功能：

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

密钥需要延迟，焦点不需要。这段代码工作正常，但可以合并这些函数，所以我没有两次相同的代码吗？

Answer 1

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

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

或类似

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

然后对两个

使用delay（）

Answer 2

一种直截了当的方法是在延迟后{}向另一方发生.trigger()事件：

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

或者，use an external callback function for both，使用.call()传递与this相同的元素：

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

Answer 3

您可以尝试将相关的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(''); }
  }
};

Answer 4

你可以定义一个带有参数的处理程序，它是一个完成函数

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

JQuery合并了两个函数keyup和focusout

4 个答案: