HTML5 입력 실시간 감지 및 지연 최적화

입력 상자가 입력을 실시간으로 모니터링하고 요청을 트리거하는 프로젝트가 있습니다.

첫 번째 아이디어는 입력에 onchange() 메서드를 사용하는 것입니다. 시도했지만 값 변경이 확인된 후에만 작동하며 이는 즉시 발생하지 않습니다.

온라인으로 확인해보니,

 $(#fix).on('입력 속성 변경', function(event){});

이 방법은 작동하지만 실시간으로 변경됩니다. 송신 주파수가 조금 빠릅니다.

서둘러 타이머 setTimeout을 추가하세요.

 $(#fix).on('input propertychange', function(event){ setTimeout(function(){ //실행을 0.5초 지연 console.log($(#fix).val()) },500); } );

문제가 또 발생합니다. 타이머가 비동기식이지만 아무런 변화 없이 계속 실행됩니다.

나중에 바인딩을 해제하고 바인딩하려고 생각했지만 바인딩 해제 시간 동안 키보드 입력 이벤트를 얻을 수 없었습니다.

당시 첫 번째 아이디어는 이벤트를 트리거하고 타이머를 삭제하고 타이머를 추가하고 기능을 실행하는 것이었습니다. 그래도 상태가 좋지 않아 타이머를 삭제할 수 없어서 그냥 실행을 멈췄습니다.

마침내 온라인으로 확인하고 새로운 방법을 찾았습니다.

타임스탬프 방법.

원칙은 입력에 의해 전역 변수와 타임스탬프가 수정될 때마다 새로운 타임스탬프가 0.5초의 지연으로 모니터링되고 바인딩된 타임스탬프와 동일하며 다음 단계로 진행된다는 것입니다.

-----html----

 <input type=text id=fix>------script-----var last;$(#fix).on('input propertychange', function(event){ //#fix는 귀하의 것입니다 input Box last = event.timeStamp; //이벤트의 timeStamp를 사용하여 시간을 표시하므로 각 이벤트는 last의 값을 수정합니다. last는 전역 변수여야 합니다. setTimeout(function(){ //시간 지연을 0.5로 설정합니다. s 실행 if(last -event.timeStamp==0) //시간 차이가 0인 경우(즉, 입력을 멈춘 후 0.5초 이내에 다른 키업 이벤트가 발생하지 않는 경우) 원하는 작업을 수행하세요. { console.log($(#fix).val()) } } , 500);});

위 내용은 에디터가 소개한 HTML5 입력 실시간 감지 및 지연 최적화에 대한 내용입니다. 궁금한 점이 있으시면 메시지를 남겨주시면 에디터가 시간 맞춰 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!