JQuery слияние двух функций keyup и focusout

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

KeyUp нужна задержка, то focusout не делает. Этот код работает нормально, но возможно ли объединить эти функции, поэтому у меня нет одинакового кода дважды?

Answer 1

вы можете определить обработчик, который принимает аргумент, который является функцией завершения.

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

Answer 2

Если вы используете несколько событий в одном обработчике использовать объект события аргумент, чтобы проверить event.type

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

Или что-то вроде

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

затем использовать задержку() для обоих

Answer 3

Один простой путь - .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 4

Вы можете попробовать Передавая соответствующие 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(''); } 
    } 
};