Jak wywołać zdarzenie onkeyup, które jest opóźnione, dopóki użytkownik nie wstrzyma pisania?

Question

Mam obszar tekstowy, w którym ludzie wprowadzają jakiś tekst (naturalnie), i chcę, aby było tak, aby żądanie AJAX było co jakiś czas zgłaszane, aby uzyskać pewne sugestie dotyczące tego, co jest tekstem (np. Podobne pytania dotyczące przepełnienia stosu, ale dla textarea, a nie wprowadzania tekstu). Problem polega na tym, że nie mogę wykonać żądania AJAX przy każdym naciśnięciu klawisza (byłoby to bezużyteczne i wymagałoby dużego nakładu zasobów) i nie jestem pewien, jaki byłby najbardziej efektywny sposób (co X słów? Co X sekund). ? albo coś innego?).

Jaki byłby najlepszy sposób robienia tego?

Z góry dziękuję.

Answer 1

Można połączyć obsługę zdarzeń keypress z setTimeout, aby wysłać żądanie Ajax przez określony czas po naciśnięciu klawisza, anulowanie i ponowne uruchomienie zegara, jeśli inne naciśnięcie nastąpi przed upływem czasu. Zakładając, że masz z textarea id „myTextArea” i funkcji Ajax zwrotnej zwanej doAjaxStuff:

function addTextAreaCallback(textArea, callback, delay) { 
    var timer = null; 
    textArea.onkeypress = function() { 
     if (timer) { 
      window.clearTimeout(timer); 
     } 
     timer = window.setTimeout(function() { 
      timer = null; 
      callback(); 
     }, delay); 
    }; 
    textArea = null; 
} 

addTextAreaCallback(document.getElementById("myTextArea"), doAjaxStuff, 1000); 

Answer 2

Jeśli interesują Cię rozwiązania jQuery, dobrym pomysłem jest jQuery Suggest.

Bezsensowne wymyślanie koła za każdym razem.

Answer 3

Osobiście użyłbym setInterval, który monitorowałby obszar tekstowy dla zmian i wykonałby tylko wywołania zwrotne AJAX po wykryciu zmiany. każda sekunda powinna być szybka i wystarczająco powolna.

Answer 4

Inną alternatywą jest użycie niewielkiej jQuery plugin o nazwie bindWithDelay. Używa tej samej techniki setTimeout, co akceptowana odpowiedź, ale obsługuje limity czasowe w sposób przezroczysty, więc twój kod jest trochę łatwiejszy do odczytania. source code można zobaczyć na github.

$("#myTextArea").bindWithDelay("keypress", doAjaxStuff, 1000) 

Answer 5

Jeśli używasz tej funkcji dużo wokół miejsca i nie chcesz, aby śledzić wszystkie odn setTimeout itp Potem pakowanych to aż do wtyczki dostępnej here.

Wtyczka dodaje kilka opcji do zwykłej metody $ .ajax do buforowania i anulowania poprzednich wywołań ajaxowych.

Answer 6

Jeśli używasz pliku underscore.js, możesz użyć debounce function.

Przykład (jQuery wykorzystywane do keyup):

$('#myTextArea').keyup(_.debounce(function(){ 
    alert('hello'); 
}, 500)); 

Answer 7

Co szukasz nazywa debouncing. Oto ogólny algorytm w rodzimej JavaScript:

function debounce(fn, duration) { 
    var timer; 
    return function() { 
    clearTimeout(timer); 
    timer = setTimeout(fn, duration) 
    } 
} 

A oto przykład jak używać go z onkeyup imprezy:

function debounce(fn, duration) { 
 
    var timer; 
 
    return function(){ 
 
    clearTimeout(timer); 
 
    timer = setTimeout(fn, duration); 
 
    } 
 
} 
 

 
$(function(){ 
 
    
 
    $('#txtSearch').on('keyup', debounce(function(){ 
 
    
 
    alert('You paused your typing!'); 
 
    
 
    }, 500)); 
 
    
 
});

input{ 
 
    padding:.5em; 
 
    font-size:16px; 
 
    width:20em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="txtSearch" placeholder="Type here" />