Javascript – какое событие использовать для изменения множественного выбора

Question

Я использую YUI в качестве инфраструктуры JavaScript и могу успешно реагировать, когда пользователь меняет значения основных полей ввода, при этом реакция заключается в отправке запроса Ajax.

Однако мне не так повезло с раскрывающимися списками с множественным выбором:

• прослушивание «изменения» будет отправлять мой запрос каждый раз, когда пользователь добавляет/удаляет элемент в свой выбор
• прослушивание «размытия» требует, чтобы пользователь щелкнул в другом месте, чтобы потерять фокус и отправить запрос (не очень удобно), плюс он отправит запрос, если пользователь только прокручивает список, ничего не меняя (бесполезно, сбивает с толку).

Есть ли идея (с YUI) использовать умное поведение?Или мне действительно следует прислушиваться к изменениям и использовать тайм-аут (чтобы дождаться последующих изменений перед отправкой запроса)?

Answer 1

Я использую тот же тип тайм-аута, который вы хотите для ключевых событий, чтобы определить, когда пользователь закончил печатать, тот же подход можно использовать и для вашей проблемы:

// helper function
var timeout = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

Использование:

// YUI 2
YAHOO.util.Event.addListener(oElement, "change", function () {
  timeout(function () {
    // one second since the last selection change
  }, 1000);
}); 

// YUI 3
Y.on("click", function () {
  timeout(function () {
    // one second since the last selection change
  }, 1000);
}, oElement);

В основном в этом timeout функция, я сбрасываю таймер, если функция вызывается до указанную задержку.

Answer 2

ты мог бы запустить setTimeout после события onChange и отслеживайте ряд изменений, чтобы определить, были ли внесены изменения с момента запуска события.если за это время не было внесено никаких изменений, запрос можно отправить.

например, что-то вроде:

var changes = 0;

function myOnChangeHandler(e)
{
  changes++;
  var local_change = changes;

  setTimeout(function() { 
    if (local_change === changes) {
      sendRequest();
    }
  }, 500);
}