избежать дублирования кода при назначении события

Question

Что такое хороший способ назначить такое же событие, инициированное поведение нескольких элементов являются один раз

В настоящее время я просто дублировать код, как это, но это, очевидно, не является оптимальным

$('.recipient #shipment_recipient_attributes_country_code').changeOrDelayedKey(function(e) { 
    cargoflux.resetCarrierProductPriceFields(); 
    cargoflux.getAvailableCarrierProducts(); 
    }, 1000, 'keyup'); 

    $('#shipment_recipient_attributes_zip_code').changeOrDelayedKey(function(e) { 
    cargoflux.resetCarrierProductPriceFields(); 
    cargoflux.getAvailableCarrierProducts(); 
    console.log('recp zip code') 
    }, 2000, 'keyup'); 

    $('.sender #shipment_sender_attributes_country_code').changeOrDelayedKey(function(e) { 
    cargoflux.resetCarrierProductPriceFields(); 
    cargoflux.getAvailableCarrierProducts(); 
    }, 1000, 'keyup'); 

    $('#shipment_sender_attributes_zip_code').changeOrDelayedKey(function(e) { 
    cargoflux.resetCarrierProductPriceFields(); 
    cargoflux.getAvailableCarrierProducts(); 
    }, 2000, 'keyup'); 

Любые предложения?

Answer 1

Вы можете добавить класс для всех элементов, и добавить атрибут data-delay для задержки, а затем применять события к каждому элементу:

Разметка:

<input class="someClass" id="some_id" data-delay="2000" ... /> 

JQuery:

$(".someClass").each(function() { 
    var $this = $(this); 
    $this.changeOrDelayedKey(function(e) { 
     cargoflux.resetCarrierProductPriceFields(); 
     cargoflux.getAvailableCarrierProducts(); 
    }, $this.data('delay'), 'keyup'); 
}); 

Answer 2

Если вы можете изменить HTML, добавьте общий класс к каждому рассматриваемому элементу, и поскольку у вас разные требования к данным (время варьируется), вы можете itera те над ними и использованием data- атрибутов для хранения, чтобы задержать:

$('.someclass').each(function(){ 
    $(this).changeOrDelayedKey(function(e) { 
     cargoflux.resetCarrierProductPriceFields(); 
     cargoflux.getAvailableCarrierProducts(); 
    }, $(this).data('delay'), 'keyup'); 

И элементов будут иметь data-delay="1000" или data-delay="2000" добавлен (а также класс, который вы выбрали).

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

например

function reset() { 
     cargoflux.resetCarrierProductPriceFields(); 
     cargoflux.getAvailableCarrierProducts(); 
    } 

    $('.someclass1000').changeOrDelayedKey(reset, 1000, 'keyup'); 
    $('.someclass2000').changeOrDelayedKey(reset, 2000, 'keyup'); 

Вы тогда просто добавьте class="someclass1000" или class="someclass2000", чтобы получить желаемый эффект.

Примечание: поскольку у вас есть поиск идентификаторов, а идентификаторы должны быть уникальными на странице, предыдущие .recipient не влияют на поисковый запрос (кроме замедления поиска).