Jak opóźnić procedurę obsługi .keyup (), dopóki użytkownik nie przestanie pisać?

Mam pole wyszukiwania. W tej chwili szuka każdego klucza. Jeśli więc ktoś wpisze „Windows”, przeprowadzi wyszukiwanie w AJAX dla każdego klucza: „W”, „Wi”, „Win”, „Wind”, „Windo”, „Window”, „Windows”.

Chcę mieć opóźnienie, więc wyszukuje tylko wtedy, gdy użytkownik przestaje pisać na 200 ms.

W tej keyupfunkcji nie ma takiej opcji i próbowałem setTimeout, ale to nie działało.

Jak mogę to zrobić?

Używam tej małej funkcji do tego samego celu, wykonując funkcję po tym, jak użytkownik przestanie pisać przez określony czas lub w przypadku zdarzeń, które uruchamiają się z dużą częstotliwością, takich jak resize:

function delay(callback, ms) {
  var timer = 0;
  return function() {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      callback.apply(context, args);
    }, ms || 0);
  };
}


// Example usage:

$('#input').keyup(delay(function (e) {
  console.log('Time elapsed!', this.value);
}, 500));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="input">Try it:
<input id="input" type="text" placeholder="Type something here..."/>
</label>

Jak to działa:

delayFunkcja zwróci zawinięty funkcję, która wewnętrznie obsługuje indywidualny licznik w każdym wykonaniu timer zostaje wznowiona z opóźnieniem czasowym przewidzianym, jeśli wiele egzekucje wystąpić przed przechodzi ten czas, zegar zostanie zresetowany i po prostu zacząć od nowa.

Kiedy licznik czasu w końcu się kończy, funkcja wywołania zwrotnego jest wykonywana, przekazując oryginalny kontekst i argumenty (w tym przykładzie obiekt zdarzenia jQuery i element DOM as this).

AKTUALIZACJA 16.05.2019

Ponownie zaimplementowałem tę funkcję za pomocą funkcji ES5 i ES6 w nowoczesnych środowiskach:

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

Implementacja objęta jest zestawem testów .

Jeśli szukasz czegoś bardziej zaawansowanego, zajrzyj do wtyczki jQuery Typewatch .

Jeśli chcesz wyszukać po zakończeniu typu, użyj zmiennej globalnej, aby zatrzymać limit czasu zwrócony z twojego setTimoutpołączenia i anuluj go, clearTimeoutjeśli jeszcze się nie zdarzyło, aby nie uruchomił limitu czasu poza ostatnim keyupzdarzeniem

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

Lub z anonimową funkcją:

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

    //ajax code

  }, 200);  
}   

Kolejne niewielkie udoskonalenie odpowiedzi CMS. Aby łatwo zezwolić na osobne opóźnienia, możesz użyć następujących opcji:

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

Jeśli chcesz ponownie użyć tego samego opóźnienia, po prostu zrób

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

Jeśli chcesz osobnych opóźnień, możesz to zrobić

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

Możesz także zajrzeć na underscore.js , który udostępnia metody narzędziowe, takie jak debounce :

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

Na podstawie odpowiedzi CMS zrobiłem to:

Wpisz poniższy kod po dołączeniu 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);

I po prostu użyj tego w następujący sposób:

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

Uwaga: zmienna $ (this) w funkcji przekazana jako parametr nie pasuje do danych wejściowych

Opóźnij połączenia wielofunkcyjne za pomocą etykiet

Z tym rozwiązaniem współpracuję. Opóźni to wykonanie dowolnej funkcji . Może to być zapytanie wyszukiwania klucza, może szybkie kliknięcie poprzednich lub następnych przycisków (które w przeciwnym razie wysyłałyby wiele żądań, jeśli byłyby szybko klikane w sposób ciągły, i mimo wszystko nie byłyby używane). Korzysta z obiektu globalnego, który przechowuje każdy czas wykonania i porównuje go z najnowszym żądaniem.

W rezultacie wywoływane jest tylko to ostatnie kliknięcie / akcja, ponieważ żądania te są przechowywane w kolejce, że po X milisekundach jest wywoływane, jeśli w kolejce nie istnieje żadne inne żądanie o tej samej etykiecie!

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);
  }

Możesz ustawić własny czas opóźnienia (opcjonalny, domyślnie 500ms). I wyślij argumenty funkcji w sposób „zamykający”.

Na przykład, jeśli chcesz wywołać funkcję poniżej:

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

Aby zapobiec wielu żądaniom send_ajax, opóźnij je, używając:

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

Każde żądanie, które używa etykiety „data sprawdzenia”, zostanie uruchomione tylko wtedy, gdy nie zostanie wysłane żadne inne żądanie w okresie 600 milisekund. Ten argument jest opcjonalny

Niezależność od etykiet (wywoływanie tej samej funkcji docelowej), ale uruchamianie obu:

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

Powoduje wywołanie tej samej funkcji, ale opóźnia je niezależnie, ponieważ ich etykiety są różne

Super proste podejście, zaprojektowane do uruchamiania funkcji po zakończeniu pisania przez użytkownika w polu tekstowym ...

<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>

Jeśli ktoś lubi opóźniać tę samą funkcję i bez zmiennej zewnętrznej może użyć następnego skryptu:

function MyFunction() {

    //Delaying the function execute
    if (this.timer) {
        window.clearTimeout(this.timer);
    }
    this.timer = window.setTimeout(function() {

        //Execute the function code here...

    }, 500);
}

Ta funkcja nieco rozszerza funkcję z odpowiedzi Gatena, aby odzyskać element:

$.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/

To działało dla mnie, gdy opóźniam operację logiki wyszukiwania i sprawdzam, czy wartość jest taka sama, jak wpisana w polu tekstowym. Jeśli wartość jest taka sama, wykonuję operację na danych związanych z wartością wyszukiwania.

$('#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);
});

Dziwi mnie, że nikt nie wspominał o problemie z wieloma danymi wejściowymi w bardzo ładnym fragmencie CMS-a.

Zasadniczo musiałbyś zdefiniować zmienną opóźnienia indywidualnie dla każdego wejścia. W przeciwnym razie, jeśli ktoś umieści tekst na pierwszym wejściu i szybko przeskoczy na inne wejście i zacznie pisać, oddzwanianie dla pierwszego NIE BĘDZIE wywoływane!

Zobacz poniższy kod, z którego korzystałem na podstawie innych odpowiedzi:

(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);

To rozwiązanie utrzymuje referencję setTimeout w zmiennej wejściowej delayTimer. Przekazuje również odwołanie elementu do wywołania zwrotnego, jak sugeruje fazzyx.

Testowane w IE6, 8 (comp - 7), 8 i Opera 12.11.

Funkcja opóźnienia przywoływana przy każdym klawiszu. Wymagane jQuery 1.7.1 lub nowsze

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 );
  });
}

Stosowanie: $('#searchBox').keyupDelay( cb );

Opierając się na odpowiedzi CMS, oto nowa metoda opóźnienia, która zachowuje „to” w swoim użyciu:

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

Stosowanie:

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

Posługiwać się

mytimeout = setTimeout( expression, timeout );

gdzie wyrażenie jest skryptem do uruchomienia, a limit czasu to czas oczekiwania w milisekundach przed jego uruchomieniem - to NIE wywołuje skryptu, ale po prostu opóźnia wykonanie tej części, dopóki limit czasu nie zostanie przekroczony.

clearTimeout(mytimeout);

zresetuje / wyczyści limit czasu, aby nie uruchamiał skryptu w wyrażeniu (jak anulowanie), dopóki nie został jeszcze wykonany.

Jest to rozwiązanie zgodne z CMS, ale rozwiązuje dla mnie kilka kluczowych problemów:

• Obsługuje wiele wejść, opóźnienia mogą być uruchamiane jednocześnie.
• Ignoruje kluczowe zdarzenia, które nie zmieniły wartości (takie jak Ctrl, Alt + Tab).
• Rozwiązuje warunek wyścigu (gdy wywołanie zwrotne jest wykonywane, a wartość już zmieniona).

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)
            }
        }
    }
}())

Stosowanie:

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

Kod jest napisany w stylu, który mi się podoba, być może trzeba dodać kilka średników.

O czym należy pamiętać:

• Unikalny identyfikator jest generowany na podstawie identyfikatora formularza i nazwy wejściowej, więc muszą być zdefiniowane i unikalne, w przeciwnym razie możesz dostosować go do swojej sytuacji.
• opóźnienie zwraca obiekt, który można łatwo rozszerzyć na własne potrzeby.
• Pierwotny element użyty do opóźnienia jest powiązany z wywołaniem zwrotnym, więc thisdziała zgodnie z oczekiwaniami (jak w przykładzie).
• Pusta wartość jest ignorowana podczas drugiego sprawdzania poprawności.
• Uważaj na kolejkę , oczekuje ona najpierw milisekund, wolę to, ale możesz chcieć zmienić parametry, aby dopasować setTimeout.

Rozwiązanie, którego używam, dodaje kolejny poziom złożoności, umożliwiając na przykład anulowanie wykonania, ale jest to dobra podstawa do budowania.

Na podstawie odpowiedzi CMS ignoruje kluczowe zdarzenia, które nie zmieniają wartości.

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 );


})

Połączenie odpowiedzi CMS z odpowiedzią Miguela daje solidne rozwiązanie pozwalające na równoczesne opóźnienia.

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

Jeśli chcesz opóźnić różne działania niezależnie, użyj trzeciego argumentu.

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

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

Użyj wtyczki jQuery bindWithDelay :

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

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
};

Oto sugestia, którą napisałem, która dotyczy wielu danych wejściowych w formularzu.

Ta funkcja pobiera obiekt pola wejściowego i umieszcza w kodzie

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

} // fieldKeyup

Jest to faktyczna funkcja delayCall, która obsługuje wiele pól wejściowych

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

Stosowanie:

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

W ES6 można również używać składni funkcji strzałek .

W tym przykładzie kod opóźnia keyupzdarzenie o 400 ms po zakończeniu pisania przez użytkowników przed wywołaniem, searchFuncaby wysłać zapytanie.

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);
})

jQuery :

var timeout = null;
$('#input').keyup(function() {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
      console.log($(this).val());
  }, 1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input type="text" id="input" placeholder="Type here..."/>

Czysty JavaScript:

let input = document.getElementById('input');
let timeout = null;

input.addEventListener('keyup', function (e) {
    clearTimeout(timeout);
    timeout = setTimeout(function () {
        console.log('Value:', input.value);
    }, 1000);
});

<input type="text" id="input" placeholder="Type here..."/>

Spójrz na wtyczkę autouzupełniania . Wiem, że pozwala określić opóźnienie lub minimalną liczbę znaków. Nawet jeśli nie użyjesz wtyczki, przejrzenie kodu da ci kilka pomysłów, jak go zaimplementować.

Zrobiłem też kawałek kodu dla ograniczenia żądania wysokiej częstotliwości ajax spowodowanego przez Keyup / Keydown. Spójrz na to:

https://github.com/raincious/jQueue

Wykonaj zapytanie w ten sposób:

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.

I powiązaj wydarzenie w ten sposób:

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

Widziałem to dzisiaj trochę późno, ale po prostu chcę to tutaj umieścić na wypadek, gdyby ktoś inny potrzebował. wystarczy oddzielić funkcję, aby można ją było ponownie wykorzystać. poniższy kod będzie czekał 1/2 sekundy po wpisaniu stop.

    var timeOutVar
$(selector).on('keyup', function() {

                    clearTimeout(timeOutVar);
                    timeOutVar= setTimeout(function(){ console.log("Hello"); }, 500);
                });

Użytkownik biblioteki javascript lodash i użyj funkcji _.debounce

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

// 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);
}