복붙노트

[JQUERY] 사용자가 입력을 멈출 때까지 어떻게 .keyup () 핸들러를 지연?

JQUERY

사용자가 입력을 멈출 때까지 어떻게 .keyup () 핸들러를 지연?

해결법


  1. 1.나는 사용자가 지정된 시간 동안이나 이벤트에 입력을 정지 한 후 기능을 실행, 같은 목적을 위해이 작은 기능을 사용하는 크기 조정과 같은 높은 속도에서 화재 :

    나는 사용자가 지정된 시간 동안이나 이벤트에 입력을 정지 한 후 기능을 실행, 같은 목적을 위해이 작은 기능을 사용하는 크기 조정과 같은 높은 속도에서 화재 :

    지연 함수 (콜백 MS) { VAR 타이머 = 0; {() 함수를 리턴 VAR 문맥이, 인수 = 인수 =; 사항 clearTimeout (타이머); 타이머의 setTimeout = (함수 () { callback.apply (문맥에 args); }, MS || 0); }; } // 사용 예제 : $ ( '# 입력.')의 keyup (지연 (함수 (E) { 을 console.log ( '시간이 경과!', this.value); } 500)); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <레이블 = "입력">를보십시오 : <입력 ID = "입력"유형 = "텍스트"자리 = "여기에 입력 뭔가 ..."/>

    다수의 실행이 시간이 경과하기 전에 발생하면 지연 함수는 내부 타이머가 제공되는 시간 지연으로 다시 시작될 때마다 실행에서 개별 타이머 처리 래핑 기능을 리턴되며, 상기 타이머는 리셋하고 다시 시작할 것이다.

    타이머가 종료하면 마지막으로, 콜백 함수는 원래의 문맥과 인수 (이 예에서는, jQuery의 이벤트 객체,이 같은 DOM 요소) 통과가 실행된다.

    나는 ES5와 ES6 현대 환경 기능을 사용하여 함수를 다시 구현 한 :

    function delay(fn, ms) {
      let timer = 0
      return function(...args) {
        clearTimeout(timer)
        timer = setTimeout(fn.bind(this, ...args), ms || 0)
      }
    }
    

    구현은 일련의 테스트에 덮여있다.

    더 정교한 뭔가를 들어, jQuery를 Typewatch 플러그인에 모양을 제공합니다.


  2. 2.당신이 입력 한 후 검색하려면 완료를 사용 귀하의 setTimout 호출에서 반환 타임 아웃을 개최하고 앞으로 일어날 그래서 마지막의 keyup을 제외하고 제한 시간을 발생하지 않습니다 것을 아직하지 못한 경우 사항 clearTimeout 그것을 취소 할 수있는 전역 변수입니다 행사

    당신이 입력 한 후 검색하려면 완료를 사용 귀하의 setTimout 호출에서 반환 타임 아웃을 개최하고 앞으로 일어날 그래서 마지막의 keyup을 제외하고 제한 시간을 발생하지 않습니다 것을 아직하지 못한 경우 사항 clearTimeout 그것을 취소 할 수있는 전역 변수입니다 행사

    var globalTimeout = null;  
    $('#id').keyup(function(){
      if(globalTimeout != null) clearTimeout(globalTimeout);  
      globalTimeout =setTimeout(SearchFunc,200);  
    }   
    function SearchFunc(){  
      globalTimeout = null;  
      //ajax code
    }
    

    또는 익명 기능 :

    var globalTimeout = null;  
    $('#id').keyup(function() {
      if (globalTimeout != null) {
        clearTimeout(globalTimeout);
      }
      globalTimeout = setTimeout(function() {
        globalTimeout = null;  
    
        //ajax code
    
      }, 200);  
    }   
    

  3. 3.CMS의 대답에 또 다른 약간의 향상. 쉽게 별도의 지연을 허용하려면 다음을 사용할 수 있습니다 :

    CMS의 대답에 또 다른 약간의 향상. 쉽게 별도의 지연을 허용하려면 다음을 사용할 수 있습니다 :

    function makeDelay(ms) {
        var timer = 0;
        return function(callback){
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        };
    };
    

    같은 지연을 재사용 할 경우에, 다만 할

    var delay = makeDelay(250);
    $(selector1).on('keyup', function() {delay(someCallback);});
    $(selector2).on('keyup', function() {delay(someCallback);});
    

    별도의 지연을 원하는 경우에, 당신은 할 수있다

    $(selector1).on('keyup', function() {makeDelay(250)(someCallback);});
    $(selector2).on('keyup', function() {makeDelay(250)(someCallback);});
    

  4. 4.디 바운스와 같은 유틸리티 메소드를 제공하는 당신은 또한, underscore.js 볼 수 있었다 :

    디 바운스와 같은 유틸리티 메소드를 제공하는 당신은 또한, underscore.js 볼 수 있었다 :

    var lazyLayout = _.debounce(calculateLayout, 300);
    $(window).resize(lazyLayout);
    

  5. 5.CMS의 답변에 따라, 나는이 만든 :

    CMS의 답변에 따라, 나는이 만든 :

    후 jQuery를 포함 아래의 코드를 넣어 :

    /*
     * delayKeyup
     * http://code.azerti.net/javascript/jquery/delaykeyup.htm
     * Inspired by CMS in this post : http://stackoverflow.com/questions/1909441/jquery-keyup-delay
     * Written by Gaten
     * Exemple : $("#input").delayKeyup(function(){ alert("5 secondes passed from the last event keyup."); }, 5000);
     */
    (function ($) {
        $.fn.delayKeyup = function(callback, ms){
            var timer = 0;
            $(this).keyup(function(){                   
                clearTimeout (timer);
                timer = setTimeout(callback, ms);
            });
            return $(this);
        };
    })(jQuery);
    

    그리고 간단하게 다음과 같이 사용합니다 :

    $('#input').delayKeyup(function(){ alert("5 secondes passed from the last event keyup."); }, 5000);
    

    주의 : 매개 변수가 입력과 일치하지 않는 기능에서 $ (이) 변수 전달


  6. 6.지연 멀티 기능 라벨을 사용하여 호출

    지연 멀티 기능 라벨을 사용하여 호출

    이것은 내가 작업하는 솔루션입니다. 그것은 당신이 원하는 모든 기능에 대한 실행을 지연됩니다. 그것은를 keyDown 검색 쿼리, 이전 또는 다음 버튼 어쩌면 빠른 클릭 (즉, 빠르게 계속 클릭 한 경우, 그렇지 않으면 여러 요청을 보낼 것이며, 결국 사용하지 않을 수)이 될 수 있습니다. 이 점포마다 실행 시간, 그리고 가장 최근의 요청과 비교하는 세계 객체를 사용한다.

    결과는 그 요청이 큐에 저장되어 있기 때문에 마지막 클릭 / 액션이 실제로 같은 레이블이 다른 요청이 큐에 존재하지 않는 경우는 X 밀리 초 후에 호출되어, 호출됩니다에만 있다는 것입니다 그래서!

    function delay_method(label,callback,time){
        if(typeof window.delayed_methods=="undefined"){window.delayed_methods={};}  
        delayed_methods[label]=Date.now();
        var t=delayed_methods[label];
        setTimeout(function(){ if(delayed_methods[label]!=t){return;}else{  delayed_methods[label]=""; callback();}}, time||500);
      }
    

    당신은 당신의 자신의 지연 시간 (500ms로 그것의 옵션 디폴트)을 설정할 수 있습니다. 그리고 "폐쇄 패션"에서 함수 인수를 보낼 수 있습니다.

    예를 들어, 당신은 벨로우즈 함수를 호출 할 경우 :

    function send_ajax(id){console.log(id);}
    

    여러 send_ajax 요청을 방지하기 위해, 당신은 사용하여 지연 :

    delay_method ( "체크 날짜"함수 () {send_ajax (2)}, 600);

    다른 요청이 600 밀리 초 단위의 시간 내에 이루어지지 않은 경우 레이블 "체크 날짜"를 사용하는 모든 요청은 트리거됩니다. 이 인수는 선택 사항입니다

    라벨 독립성 (동일한 대상 함수를 호출)하지만 모두 실행

    delay_method("check date parallel", function(){send_ajax(2);});
    delay_method("check date", function(){send_ajax(2);});
    

    같은 함수를 호출의 결과 때문이 아니라 자신의 레이블 인 다른 독립적를 지연


  7. 7.같은 사람이 같은 기능을 지연하는 경우, 외부 변수없이 그는 다음 스크립트를 사용할 수 있습니다 :

    같은 사람이 같은 기능을 지연하는 경우, 외부 변수없이 그는 다음 스크립트를 사용할 수 있습니다 :

    function MyFunction() {
    
        //Delaying the function execute
        if (this.timer) {
            window.clearTimeout(this.timer);
        }
        this.timer = window.setTimeout(function() {
    
            //Execute the function code here...
    
        }, 500);
    }
    

  8. 8.슈퍼 간단한 방법, 사용자가 텍스트 필드에 완성 된 입력을 한 후 함수를 실행하도록 설계 ...

    슈퍼 간단한 방법, 사용자가 텍스트 필드에 완성 된 입력을 한 후 함수를 실행하도록 설계 ...

    <script type="text/javascript">
    $(document).ready(function(e) {
        var timeout;
        var delay = 2000;   // 2 seconds
    
        $('.text-input').keyup(function(e) {
            console.log("User started typing!");
            if(timeout) {
                clearTimeout(timeout);
            }
            timeout = setTimeout(function() {
                myFunction();
            }, delay);
        });
    
        function myFunction() {
            console.log("Executing function for user!");
        }
    });
    </script>
    
    <textarea name="text-input" class="text-input"></textarea>
    

  9. 9.이 기능은 요소 다시 얻기 위해 게튼의 대답 a를 비트에서 기능을 확장 :

    이 기능은 요소 다시 얻기 위해 게튼의 대답 a를 비트에서 기능을 확장 :

    $.fn.delayKeyup = function(callback, ms){
        var timer = 0;
        var el = $(this);
        $(this).keyup(function(){                   
        clearTimeout (timer);
        timer = setTimeout(function(){
            callback(el)
            }, ms);
        });
        return $(this);
    };
    
    $('#input').delayKeyup(function(el){
        //alert(el.val());
        // Here I need the input element (value for ajax call) for further process
    },1000);
    

    http://jsfiddle.net/Us9bu/2/


  10. 10.나는 아무도 CMS의 아주 좋은 잘린에서 여러 입력이 문제를 언급 없음을 놀라게하고있다.

    나는 아무도 CMS의 아주 좋은 잘린에서 여러 입력이 문제를 언급 없음을 놀라게하고있다.

    기본적으로, 각 입력에 대해 개별적으로 지연 변수를 정의해야합니다. SB 먼저 입력 텍스트를 넣어 빠르게 다른 입력으로 이동하고 입력을 시작 그렇지 않은 경우, 첫 번째에 대한 콜백이 호출되지 않습니다!

    나는 다른 답변에 근거와 함께 아래의 코드를 참조하십시오 :

    (function($) {
        /**
         * KeyUp with delay event setup
         * 
         * @link http://stackoverflow.com/questions/1909441/jquery-keyup-delay#answer-12581187
         * @param function callback
         * @param int ms
         */
        $.fn.delayKeyup = function(callback, ms){
                $(this).keyup(function( event ){
                    var srcEl = event.currentTarget;
                    if( srcEl.delayTimer )
                        clearTimeout (srcEl.delayTimer );
                    srcEl.delayTimer = setTimeout(function(){ callback( $(srcEl) ); }, ms);
                });
    
            return $(this);
        };
    })(jQuery);
    

    이 용액의 delayTimer 입력 변수의 setTimeout 내의 참조를 유지한다. fazzyx이 제안 또한 콜백 요소의 참조를 전달합니다.

    , 8, 오페라 12.11 - IE6, 8 (7 완)에서 테스트.


  11. 11.내가 검색 논리 연산을 지연 및 텍스트 필드에 입력 된 값이 동일한 경우 체크 할 곳은 날 위해 일했습니다. 값이 동일하면 그때 가서 값을 검색 할 관련 데이터에 대한 작업을 수행합니다.

    내가 검색 논리 연산을 지연 및 텍스트 필드에 입력 된 값이 동일한 경우 체크 할 곳은 날 위해 일했습니다. 값이 동일하면 그때 가서 값을 검색 할 관련 데이터에 대한 작업을 수행합니다.

    $('#searchText').on('keyup',function () {
        var searchValue = $(this).val();
        setTimeout(function(){
            if(searchValue == $('#searchText').val() && searchValue != null && searchValue != "") {
               // logic to fetch data based on searchValue
            }
            else if(searchValue == ''){
               // logic to load all the data
            }
        },300);
    });
    

  12. 12.지연은 모든의 keyup에 호출하는 기능을 수행합니다. jQuery를 1.7.1 또는 최대 요구

    지연은 모든의 keyup에 호출하는 기능을 수행합니다. jQuery를 1.7.1 또는 최대 요구

    jQuery.fn.keyupDelay = function( cb, delay ){
      if(delay == null){
        delay = 400;
      }
      var timer = 0;
      return $(this).on('keyup',function(){
        clearTimeout(timer);
        timer = setTimeout( cb , delay );
      });
    }
    

    사용법 : $ ( '#의 정보 검색') keyupDelay (CB).


  13. 13.이 CMS의의 라인을 따라 솔루션입니다,하지만 나를 위해 몇 가지 주요 문제를 해결합니다 :

    이 CMS의의 라인을 따라 솔루션입니다,하지만 나를 위해 몇 가지 주요 문제를 해결합니다 :

    var delay = (function() {
        var timer = {}
          , values = {}
        return function(el) {
            var id = el.form.id + '.' + el.name
            return {
                enqueue: function(ms, cb) {
                    if (values[id] == el.value) return
                    if (!el.value) return
                    var original = values[id] = el.value
                    clearTimeout(timer[id])
                    timer[id] = setTimeout(function() {
                        if (original != el.value) return // solves race condition
                        cb.apply(el)
                    }, ms)
                }
            }
        }
    }())
    

    용법:

    signup.key.addEventListener('keyup', function() {
        delay(this).enqueue(300, function() {
            console.log(this.value)
        })
    })
    

    코드는 내가 즐기는 스타일로 작성된 것입니다, 당신은 세미콜론의 무리를 추가해야 할 수도 있습니다.

    명심해야 할 것들 :

    이 솔루션의 I를 사용하면 예를 들어, 실행을 취소 할 수 복잡성의 또 다른 레벨을 추가하지만이에 구축 할 수있는 좋은 장소입니다.


  14. 14.미구엘의 하나 CMS 응답을 결합하면 동시 지연을 허용하는 강력한 솔루션을 얻을 수 있습니다.

    미구엘의 하나 CMS 응답을 결합하면 동시 지연을 허용하는 강력한 솔루션을 얻을 수 있습니다.

    var delay = (function(){
        var timers = {};
        return function (callback, ms, label) {
            label = label || 'defaultTimer';
            clearTimeout(timers[label] || 0);
            timers[label] = setTimeout(callback, ms);
        };
    })();
    

    당신이 독립적으로 다른 작업을 지연해야하는 경우, 세 번째 인수를 사용합니다.

    $('input.group1').keyup(function() {
        delay(function(){
            alert('Time elapsed!');
        }, 1000, 'firstAction');
    });
    
    $('input.group2').keyup(function() {
        delay(function(){
            alert('Time elapsed!');
        }, 1000, '2ndAction');
    });
    

  15. 15.여기 CMS의 대답에 구축하는 보존 새 지연 방식의 '이'의 사용에서 :

    여기 CMS의 대답에 구축하는 보존 새 지연 방식의 '이'의 사용에서 :

    var delay = (function(){
      var timer = 0;
      return function(callback, ms, that){
        clearTimeout (timer);
        timer = setTimeout(callback.bind(that), ms);
      };
    })();
    

    용법:

    $('input').keyup(function() {
        delay(function(){
          alert('Time elapsed!');
        }, 1000, this);
    });
    

  16. 16.jQuery를 :

    jQuery를 :

    VAR 시간 제한 = NULL; $ ( '# 입력.')의 keyup (함수 () { 사항 clearTimeout (초과); 타임 아웃의 setTimeout = (() => { 을 console.log ($ (이) .val ()); } 1000); }); <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"> <입력 유형 = "텍스트"ID = "입력"자리 = "... 여기에 입력"/>

    순수 자바 스크립트 :

    document.getElementById를 입력 할 수 = ( '입력'); 시간 제한 = 널하자; input.addEventListener ( '의 keyup', 기능 (E) { 사항 clearTimeout (초과); 타임 아웃의 setTimeout = (함수 () { 을 console.log ( '값', input.value); } 1000); }); <입력 유형 = "텍스트"ID = "입력"자리 = "... 여기에 입력"/>


  17. 17.사용하다

    사용하다

    mytimeout = setTimeout( expression, timeout );
    

    식을 실행할 수있는 스크립트와 타임 아웃이 실행되기 전에 밀리 초 단위로 대기 시간입니다 -이 스크립트를 hault하지 않지만, 타임 아웃이 완료 될 때까지 단순히 그 부분의 실행을 지연.

    clearTimeout(mytimeout);
    

    (A 취소 등)는 표현에서 스크립트를 실행하지 않도록이 아직 실행되지 않은만큼 시간 제한을 삭제 / 초기화됩니다.


  18. 18.CMS의 답변에 따라, 그것은 단지 값을 변경하지 않는 키 이벤트를 무시합니다.

    CMS의 답변에 따라, 그것은 단지 값을 변경하지 않는 키 이벤트를 무시합니다.

    var delay = (function(){
        var timer = 0;
        return function(callback, ms){
          clearTimeout (timer);
          timer = setTimeout(callback, ms);
        };
    })(); 
    
    var duplicateFilter=(function(){
      var lastContent;
      return function(content,callback){
        content=$.trim(content);
        if(content!=lastContent){
          callback(content);
        }
        lastContent=content;
      };
    })();
    
    $("#some-input").on("keyup",function(ev){
    
      var self=this;
      delay(function(){
        duplicateFilter($(self).val(),function(c){
            //do sth...
            console.log(c);
        });
      }, 1000 );
    
    
    })
    

  19. 19.bindWithDelay jQuery 플러그인을 사용하여

    bindWithDelay jQuery 플러그인을 사용하여

    element.bindWithDelay(eventType, [ eventData ], handler(eventObject), timeout, throttle)
    

  20. 20.

    var globalTimeout = null;  
    $('#search').keyup(function(){
      if(globalTimeout != null) clearTimeout(globalTimeout);  
      globalTimeout =setTimeout(SearchFunc,200);  
    });
    function SearchFunc(){  
      globalTimeout = null;  
      console.log('Search: '+$('#search').val());
      //ajax code
    };
    

  21. 21.여기에 귀하의 형태로 복수의 입력을 담당 내가 작성한 제안입니다.

    여기에 귀하의 형태로 복수의 입력을 담당 내가 작성한 제안입니다.

    이 기능은 코드에 넣어 입력 필드의 객체를 가져옵니다

    function fieldKeyup(obj){
        //  what you want this to do
    
    } // fieldKeyup
    

    이것은 실제 delayCall 함수 인 복수의 입력 필드 돌봐

    function delayCall(obj,ms,fn){
        return $(obj).each(function(){
        if ( typeof this.timer == 'undefined' ) {
           // Define an array to keep track of all fields needed delays
           // This is in order to make this a multiple delay handling     
              function
            this.timer = new Array();
        }
        var obj = this;
        if (this.timer[obj.id]){
            clearTimeout(this.timer[obj.id]);
            delete(this.timer[obj.id]);
        }
    
        this.timer[obj.id] = setTimeout(function(){
            fn(obj);}, ms);
        });
    }; // delayCall
    

    용법:

    $("#username").on("keyup",function(){
        delayCall($(this),500,fieldKeyup);
    });
    

  22. 22.ES6에서 하나 아니라 함수 구문 화살표 사용할 수있다.

    ES6에서 하나 아니라 함수 구문 화살표 사용할 수있다.

    이 예에서 사용자 이후에는 400ms의 코드 지연의 keyup 이벤트가 검색 Func을 쿼리 요청을 호출하기 전에 입력을 완료합니다.

    const searchbar = document.getElementById('searchBar');
    const searchFunc = // any function
    
    // wait ms (milliseconds) after user stops typing to execute func
    const delayKeyUp = (() => {
        let timer = null;
        const delay = (func, ms) => {
            timer ? clearTimeout(timer): null
            timer = setTimeout(func, ms)
        }
        return delay
    })();
    
    searchbar.addEventListener('keyup', (e) => {
        const query = e.target.value;
        delayKeyUp(() => {searchFunc(query)}, 400);
    })
    

  23. 23.자동 완성 플러그인을 살펴보십시오. 나는 당신이 지연 또는 문자의 최소 수를 지정할 수 있습니다 것을 알고있다. 당신이 플러그인을 사용하여 종료하지 않는 경우에도 코드를 찾고 당신에게 스스로를 구현하는 방법에 대한 몇 가지 아이디어를 줄 것이다.

    자동 완성 플러그인을 살펴보십시오. 나는 당신이 지연 또는 문자의 최소 수를 지정할 수 있습니다 것을 알고있다. 당신이 플러그인을 사용하여 종료하지 않는 경우에도 코드를 찾고 당신에게 스스로를 구현하는 방법에 대한 몇 가지 아이디어를 줄 것이다.


  24. 24.그런데, 나도의 keyup /에서 KeyDown 의해 제한 고주파 Ajax 요청의 원인 코드 부분을 만들었다. 이것 좀 봐:

    그런데, 나도의 keyup /에서 KeyDown 의해 제한 고주파 Ajax 요청의 원인 코드 부분을 만들었다. 이것 좀 봐:

    https://github.com/raincious/jQueue

    이 같은 쿼리를 수행합니다 :

    var q = new jQueue(function(type, name, callback) {
        return $.post("/api/account/user_existed/", {Method: type, Value: name}).done(callback);
    }, 'Flush', 1500); // Make sure use Flush mode.
    

    그리고이 같은 바인드 이벤트 :

    $('#field-username').keyup(function() {
        q.run('Username', this.val(), function() { /* calling back */ });
    });
    

  25. 25.이 오늘 조금 늦게 보았다 그러나 다만 다른 필요한 경우 누군가 여기를 넣고 싶다. 그냥 다시 사용할 수 있도록 기능을 구분합니다. 아래의 코드는 입력 정지 후 1/2 초를 기다립니다.

    이 오늘 조금 늦게 보았다 그러나 다만 다른 필요한 경우 누군가 여기를 넣고 싶다. 그냥 다시 사용할 수 있도록 기능을 구분합니다. 아래의 코드는 입력 정지 후 1/2 초를 기다립니다.

        var timeOutVar
    $(selector).on('keyup', function() {
    
                        clearTimeout(timeOutVar);
                        timeOutVar= setTimeout(function(){ console.log("Hello"); }, 500);
                    });
    

  26. 26.사용자 lodash의 자바 스크립트 라이브러리와 사용 _.debounce 기능

    사용자 lodash의 자바 스크립트 라이브러리와 사용 _.debounce 기능

    changeName: _.debounce(function (val) {
      console.log(val)                
    }, 1000)
    

  27. 27.

    // Get an global variable isApiCallingInProgress
    
    //  check isApiCallingInProgress 
    if (!isApiCallingInProgress) {
    // set it to isApiCallingInProgress true
          isApiCallingInProgress = true;
    
          // set timeout
          setTimeout(() => {
             // Api call will go here
    
            // then set variable again as false
            isApiCallingInProgress = false;     
          }, 1000);
    }
    
  28. from https://stackoverflow.com/questions/1909441/how-to-delay-the-keyup-handler-until-the-user-stops-typing by cc-by-sa and MIT license