검색 상자에서 비동기 아약스가 호출됩니다.

Question

몇 달 전에 고객을위한 asp.net 솔루션을 개발했습니다. 여기서는 입력란에 AzureSearch를 사용하고 있습니다. 내 접근 방식은 사용자의 마지막 키 스트로크 이후로 초당 회신했다 아약스 요청을 보내는 것이었다. 그러나 우리 고객은 항상 입력 상자의 onchange에서 발생하기를 원했습니다. 그래서 그렇게했습니다.

이로 인해 클라이언트에서 버그가 일치하지 않는 검색어를보고했습니다. 경쟁 조건으로 인해 비동기 호출이 기록되었으며 그 일이 발생했습니다. 0.5 초 지연을 자바 스크립트 자동 완성에 추가하는 방법에 대해 생각하고 있습니다. 아니면 더 좋은 방법이 있습니까? 자바 스크립트에서 수영장을 가지고있는 것. 우리가 사용하고있는 컨트롤은 jquery easy autocomplete입니다.

Answer 1

결국 지연이나 스로틀을 추가 할 필요가 없습니다. 마지막 AJAX 호출이 neccessarily에서 마지막 응답 할 musn't 때문에, 경쟁 조건을 피하기 위해 :

• matchResponseProperty : 공식 사이트를 확인, 나는 있습니다 JQuery와 - 쉬운 자동 완성에 두 개의 매우 유용한 특성을 발견 백엔드 서비스에서는 입력의 현재 텍스트와 일치하는이 속성으로 지정된 이름의 특성을 갖는 최종 응답을 취합니다.

• listLocation : 익명 목록의 항목 및 InputPhrase라는 속성을 사용하여 렌더링 할 때까지 기본 응답 개체의 목록 위치를 지정하고 응답에이 모델을 사용했습니다. .

  public class SearchViewModel 
  { 
      public List<dynamic> Items { get; set; } 
      public string InputPhrase { get; set; } 
  } 
  

마지막으로, 나는이 "항목"matchResponseProperty에 "InputPhrase"및 listLocation을 설정

Answer 2

당신이하고있는 일을 "debounce"라고합니다. 디 바운스 (debounce)는 사용자가 입력을 시작할 때 타이머의 카운트 다운을 시작하는 것입니다. 타이머가 끝나기 전에 더 많은 입력을 입력하면 타이머가 재설정되고 다시 카운트 다운을 시작합니다. 타이머가 완료 될 때만 AJAX 호출이 이루어집니다. 이 경우 200ms의 지연은 대부분의 사람들이 여전히 반응을 느낄 것으로 생각하는 연구 결과입니다.

그러나 실제로 사용자가 입력하는 동안 결과가 부어지기를 원하면 대신 필요한 것을 "스로틀"이라고합니다. 스로틀은 디버깅과 비슷하지만, 입력이 멈출 때까지 기다리는 것이 아니라 규칙적인 간격으로 트리거한다는 점만 다릅니다. 하나의 타이머를 만들려면 타이머가 있어야하지만, 사용자가 더 많은 입력을 입력 할 때마다 타이머를 재설정하지는 않습니다. 대신 새로운 입력이 입력되었는지 여부를 추적하기 위해 부울을 사용합니다. 타이머가 끝나면 boolean이 true인지 확인하고 false이면 false로 설정하고 타이머를 다시 시작합니다.

AJAX 호출이 이미 발생했는지 여부를 추적하여 두 가지 방법 모두를 향상시킬 수 있습니다. 두 경우 모두, 타이머가 만료되고 통화가 진행중인 경우 부울 추적이 참이면 타이머를 다시 시작하십시오.

debounce과 throttle은 모두 lodash와 같은 여러 유틸리티 라이브러리에서 이미 사용할 수 있습니다. 이를 사용하여 기존 이벤트 핸들러를 랩핑 할 수 있습니다.

var myInputChangeHandler = function() { 
    // do ajax call 
}; 

// throttled handler will only be called every 200 ms... 
var throttled = _.throttle(myInputChangeHandler, 200); 
// ...no matter how many times this event fires 
jQuery('input[type=text]').on('change', throttled);