사용자가 입력을 일시 중지할 때까지 지연되는 키 켜기 이벤트를 트리거하려면 어떻게 해야 합니까?

사용자가 입력을 일시 중지할 때까지 지연되는 키 켜기 이벤트를 트리거하려면 어떻게 해야 합니까?

텍스트 영역에는 (자연스럽게) 텍스트를 입력할 수 있는 텍스트 영역이 있으며, 텍스트 영역의 내용에 대한 제안(예를 들어 스택 오버플로의 Related Questions, 텍스트 입력이 아닌 텍스트 영역)을 얻기 위해 AJAX 요청이 가끔 이루어지도록 하고 싶습니다.문제는 키를 누를 때마다 AJAX 요청을 수행할 수 없다는 것입니다(무용하고 리소스가 많이 소모됨). 가장 효율적인 방법(각 X 단어)이 무엇인지 잘 모르겠다는 것입니다.X초마다?아니면 다른 것이라도?)

어떻게 하면 좋을까요?

잘 부탁드립니다.

조합할 수 있습니다.keypress이벤트 핸들러setTimeout따라서 키를 누른 후 설정된 시간만큼 Ajax 요청을 전송하고 타이머가 종료되기 전에 다른 키 누르기가 발생하면 타이머를 취소하고 재시작합니다.ID가 'myTextArea'인 텍스트 영역과 Ajax 콜백 함수가 있다고 가정합니다.doAjaxStuff:

function addTextAreaCallback(textArea, callback, delay) {
    var timer = null;
    textArea.onkeypress = function() {
        if (timer) {
            window.clearTimeout(timer);
        }
        timer = window.setTimeout( function() {
            timer = null;
            callback();
        }, delay );
    };
    textArea = null;
}

addTextAreaCallback( document.getElementById("myTextArea"), doAjaxStuff, 1000 );

당신이 찾고 있는 것은debouncing다음은 네이티브 JavaScript의 범용 알고리즘입니다.

function debounce(fn, duration) {
  var timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(fn, duration)
  }
}

이 예에서는 이 기능을 사용하는 방법을 보여 줍니다.onkeyup이벤트:

function debounce(fn, duration) {
  var timer;
  return function(){
    clearTimeout(timer);
    timer = setTimeout(fn, duration);
  }
}

const txt = document.querySelector('#txt')
const out = document.querySelector('#out')
const status = document.querySelector('#status')

const onReady = () => {
  txt.addEventListener('keydown', () => {
    out.classList.remove('idle')
    out.classList.add('typing')
    status.textContent = 'typing...'
  })
  
  txt.addEventListener('keyup', debounce(() => {
    out.classList.remove('typing')
    out.classList.add('idle')
    status.textContent = 'idle...'
  }, 800))
}

document.addEventListener('DOMContentLoaded', onReady)

#wrapper{
  width: 300px;
}

input{
  padding: 8px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}

#out{
  margin: 10px 0;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}

.typing{
  background: #A00;
  color: #FFF;
}

.idle{
  background: #0A0;
  color: #FFF;
}

<div id="wrapper">
  <input id="txt" placeholder="Type here" />
  <div id="out">Status: <span id="status">waiting...</span></div>
</div>

또 다른 방법은 bind With Delay라는 작은 jQuery 플러그인을 사용하는 것입니다.이는 수용된 답변과 동일한 set Timeout 기술을 사용하지만 타임아웃을 투과적으로 처리하므로 코드를 읽기 쉬워집니다.소스 코드는 github에서 확인할 수 있습니다.

$("#myTextArea").bindWithDelay("keypress", doAjaxStuff, 1000)

lodash.js(또는 언더스코어.js)를 사용하는 경우 debounce 함수를 사용할 수 있습니다.

예(keyup에 사용되는 jQuery):

$('#myTextArea').keyup(_.debounce(function() {
  alert('hello');
}, 500));

jQuery 솔루션에 관심이 있는 경우 jQuery 제안이 좋은 구현입니다.

매번 바퀴를 재발명하는 건 무의미해

저는 개인적으로setInterval는 텍스트 영역의 변경을 감시하고 변경이 검출되었을 때만 AJAX 콜백을 실행합니다.1초도 충분히 빠르고 느려야 해

사이트 전체에서 이 기능을 사용하고 있고, 모든 set Timeout refs 등을 추적하고 싶지 않은 경우, 이 기능을 여기에서 사용할 수 있는 플러그인으로 패키지화했습니다.

플러그인은 일반적인 $.ajax 메서드에 이전 Ajax 호출을 버퍼링 및 취소하기 위한 몇 가지 옵션을 추가합니다.

언급URL : https://stackoverflow.com/questions/1620602/how-to-trigger-an-onkeyup-event-thats-delayed-until-a-user-pauses-their-typing