Javascript : 사용자가 입력을 멈출 때만 이벤트 수신기를 업데이트하여 어떻게 변경합니까? 그것은 슬라이더의 위치를 ​​제어</p> <pre><code>input_1.addEventListener('input',function(){ updateFromInput(1); },false); </code></pre> <p>:

Question

나는이 이벤트 리스너가 있습니다.
지금 입력에 "100"을 입력하려면 슬라이더가 "1"위치로 점프 한 다음 "10"으로 점프 한 다음 마지막으로 "100"위치로 건너 뛰기 시작합니다.
꽤 어설픈데, 좀 더 자연스러운 느낌을주고 싶습니다.

저는 이제 JS를 읽기가 꽤 편안하지만, 아직 글을 쓰는 초심자입니다. (타이머보다 큰 750ms updateFromInput 경우)

내가 타이머의이 유형에 필요한 논리를 이해하고, 내가 자바 스크립트에서 그 코딩을 시작하는 방법을 조금 흐릿 해요.
은 물론 타이머 기능이 유형의 단지 찾을 에 예를 들어 두 :)

코드 어려움을 겪고 ... 다만 많은 개발자 만 한 시간 전에 완료되었습니다에게, 링크 또는 예는 것 대단히 감사합니다.

Answer 1

일반적인 방법은 타이머를 설정할 수 있으며, 다른 키 스트로크 (keystroke)를 참조하면, 이전 타이머를 취소하고 새, 예를 들어 설정합니다 (값을 50ms로하여 업데이트를 지연시킬

var timer = 0; 
input_1.addEventListener('input',function(){ 
    maybeUpdateFromInput(1); 
},false); 

function maybeUpdateFromInput(val) { 
    if (timer) { 
     clearTimeout(timer); 
    } 
    timer = setTimeout(function() { 
     updateFromInput(val); 
     timer = 0; 
    }, 50); // 50 = 50ms, you may want 75, 100, even 125 
} 

을 setTimeout 호출시). 50ms 이상 입력이 보이지 않으면 업데이트됩니다.

Answer 2

나는 이것을 처리하는 더 좋은 방법은 키 다운과 키 업 모두에 있다고 생각한다. 이렇게하면 사용자가 키를 누른 채로 있으면 잘못 해석되지 않습니다. 이 jsFiddle에서보세요 :

http://jsfiddle.net/9c46B/3/

물론, 당신은 이벤트 리스너를 추가로 변경해야 할 것 (대신 HTML에서 인라인 핸들러). 그리고 분명히 당신은 당신이 원하는 무엇이든 경고를 바꿀 것입니다. 그러나 잘하면이 도움이되고 당신이 찾고있는 것입니다!