JavaScript- 다중 선택 변경에 사용할 이벤트

Question

YUI를 JavaScript 프레임 워크로 사용하고 있으며 사용자가 기본 입력 필드의 값을 변경할 때 성공적으로 반응 할 수 있으며, 반응은 AJAX 쿼리를 보냈습니다.

그러나 다중 선택 드롭 다운 목록에는 운이 좋지 않습니다.

• "Change"를 듣는 것은 사용자가 선택에 항목을 추가/제거 할 때마다 내 쿼리를 보냅니다.
• "Blur"를 듣기 위해서는 사용자가 초점을 잃고 쿼리를 보내기 위해 다른 곳을 클릭해야하며 (매우 사용하기 어려운), 사용자가 아무것도 변경하지 않고 목록에서 스크롤하는 경우 쿼리를 보냅니다 (쓸모없고 혼란 스럽습니다.

영리한 행동을 사용하는 아이디어 (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

당신은 a setTimeout OnChange 이벤트 후에 이벤트가 발사 된 이후 변경되었는지 여부를 결정하기 위해 여러 변경 사항을 추적합니다. 그 시간 내에 변경되지 않으면 쿼리를 전송할 수 있습니다.

예를 들어, 같은 것 :

var changes = 0;

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

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