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

이 글은 주로 html5 입력 입력의 실시간 감지 및 지연 최적화에 대해 소개합니다. 참고할 만한 가치가 있으니 도움이 필요한 분들에게 도움이 되길 바랍니다.

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

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

온라인으로 확인한 결과

$("#fix").on('input propertychange', function(event){
});

방법이 작동하지만 실시간으로 변경해야 하는 것으로 나타났습니다. 송신 주파수가 조금 빠릅니다.

빨리 타이머 setTimeout을 추가하세요.

$("#fix").on('input propertychange', function(event){
   setTimeout(function(){    //延迟0.5s执行
                   console.log($("#fix").val())
        },500);
});

문제가 다시 발생합니다. 타이머가 비동기식이지만 여전히 실행되며 변경된 사항이 없습니다.

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

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

드디어 온라인으로 확인해본 결과 새로운 방법을 찾았습니다.

타임 스탬프 방식.

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

-----html-----

<input type="text" id="fix">
------script-----
var last;
$("#fix").on(&#39;input propertychange&#39;, function(event){
    //"#fix为你的输入框
       last = event.timeStamp;
       //利用event的timeStamp来标记时间，这样每次事件都会修改last的值，注意last必需为全局变量
       setTimeout(function(){    //设时延迟0.5s执行
            if(last-event.timeStamp==0)
               //如果时间差为0（也就是你停止输入0.5s之内都没有其它的keyup事件发生）则做你想要做的事
              {
                   console.log($("#fix").val())
               }
        },500);
});

Summary

이상이 여러분께 소개된 html5 입력 입력의 실시간 감지 및 지연 최적화 전체 내용입니다. 모두가 도움말을 배웁니다. 더 많은 관련 튜토리얼을 보려면 Html5 비디오 튜토리얼을 방문하세요!

관련 권장 사항:

php 공공 복지 교육 비디오 튜토리얼

HTML5 그래픽 튜토리얼

HTML5 온라인 매뉴얼

위 내용은 HTML5 입력 실시간 감지 및 지연 최적화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!