Esegui la funzione javascript quando l'utente termina di digitare anziché al tasto su?

Voglio attivare una richiesta Ajax quando l'utente ha finito di digitare in una casella di testo. Non voglio che esegua la funzione ogni volta che l'utente digita una lettera perché ciò comporterebbe MOLTE richieste ajax, tuttavia non voglio che neanche loro debbano premere il pulsante Invio.

C'è un modo in cui posso rilevare quando l'utente ha finito di digitare e quindi fare la richiesta Ajax?

Usando jQuery qui! Dave

Quindi, immagino che finire di scrivere significhi che ti fermi per un po ', diciamo 5 secondi. Pertanto, tenendo presente ciò, consente di avviare un timer quando l'utente rilascia un tasto e lo cancella quando ne preme uno. Ho deciso che l'input in questione sarà #myInput.

Fare alcune ipotesi ...

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example
var $input = $('#myInput');

//on keyup, start the countdown
$input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$input.on('keydown', function () {
  clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}

La risposta scelta sopra non funziona.

Poiché typingTimer è impostato occasionalmente più volte (il keyup è premuto due volte prima che il keydown venga attivato per chi digita velocemente ecc.), Allora non si cancella correttamente.

La soluzione seguente risolve questo problema e chiama X secondi dopo aver terminato come richiesto dall'OP. Inoltre non richiede più la funzione keydown ridondante. Ho anche aggiunto un segno di spunta in modo che la chiamata di funzione non accada se l'input è vuoto.

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms (5 seconds)

//on keyup, start the countdown
$('#myInput').keyup(function(){
    clearTimeout(typingTimer);
    if ($('#myInput').val()) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

E lo stesso codice nella soluzione JavaScript vanilla:

//setup before functions
let typingTimer;                //timer identifier
let doneTypingInterval = 5000;  //time in ms (5 seconds)
let myInput = document.getElementById('myInput');

//on keyup, start the countdown
myInput.addEventListener('keyup', () => {
    clearTimeout(typingTimer);
    if (myInput.value) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

Questa soluzione utilizza ES6 ma non è necessaria qui. Basta sostituire letcon vare la funzione freccia con una funzione normale.

È solo una riga con la funzione di debounce underscore.js :

$('#my-input-box').keyup(_.debounce(doSomething , 500));

Questo in pratica dice doShinghing 500 millisecondi dopo che ho smesso di scrivere.

Per maggiori informazioni: http://underscorejs.org/#debounce

Sì, è possibile impostare un timeout di dire 2 secondi su ogni singolo evento key-up che genererà una richiesta Ajax. È inoltre possibile memorizzare il metodo XHR e interromperlo nei successivi eventi di pressione dei tasti in modo da risparmiare banda con ancora di più. Ecco qualcosa che ho scritto per un mio script di completamento automatico.

var timer;
var x;

$(".some-input").keyup(function () {
    if (x) { x.abort() } // If there is an existing XHR, abort it.
    clearTimeout(timer); // Clear the timer so we don't end up with dupes.
    timer = setTimeout(function() { // assign timer a new timeout 
        x = $.getJSON(...); // run ajax request and store in x variable (so we can cancel)
    }, 2000); // 2000ms delay, tweak for faster/slower
});

Spero che sia di aiuto,

Marko

var timer;
var timeout = 1000;

$('#in').keyup(function(){
    clearTimeout(timer);
    if ($('#in').val) {
        timer = setTimeout(function(){
            //do stuff here e.g ajax call etc....
             var v = $("#in").val();
             $("#out").html(v);
        }, timeout);
    }
});

esempio completo qui: http://jsfiddle.net/ZYXp4/8/

Entrambe le prime 2 risposte non funzionano per me. Quindi, ecco la mia soluzione:

var timeout = null;

$('#myInput').keyup(function() {
    clearTimeout(timeout);

    timeout = setTimeout(function() {
        //do stuff here
    }, 500);
});

Mi piace la risposta di Surreal Dream ma ho scoperto che la mia funzione "doneTyping" si attiva per ogni pressione di un tasto, vale a dire se si digita "Hello" molto rapidamente; invece di sparare solo una volta quando smetti di scrivere, la funzione si attiva 5 volte.

Il problema era che la funzione javascript setTimeout non sembra sovrascrivere o uccidere i vecchi timeout impostati, ma se lo fai tu stesso funziona! Quindi ho appena aggiunto una chiamata clearTimeout appena prima di setTimeout se è impostato il typingTimer. Vedi sotto:

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example

//on keyup, start the countdown
$('#myInput').on("keyup", function(){
    if (typingTimer) clearTimeout(typingTimer);                 // Clear if already set     
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$('#myInput').on("keydown", function(){
    clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

NB Mi sarebbe piaciuto aggiungere questo come commento alla risposta di Surreal Dream, ma sono un nuovo utente e non ho abbastanza reputazione. Scusate!

Modifica della risposta accettata per gestire altri casi come incolla:

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 2000;  //time in ms, 2 second for example
var $input = $('#myInput');

// updated events 
$input.on('input propertychange paste', function () {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(doneTyping, doneTypingInterval);      
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}

Non credo che l'evento keyDown sia necessario in questo caso (per favore dimmi perché se sbaglio). Nel mio script (non jquery) una soluzione simile si presenta così:

var _timer, _timeOut = 2000; 



function _onKeyUp(e) {
    clearTimeout(_timer);
    if (e.keyCode == 13) {      // close on ENTER key
        _onCloseClick();
    } else {                    // send xhr requests
        _timer = window.setTimeout(function() {
            _onInputChange();
        }, _timeOut)
    }

}

È la mia prima risposta su Stack Overflow, quindi spero che questo aiuti qualcuno, un giorno :)

Dichiarare la seguente delayfunzione:

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

e poi usalo:

let $filter = $('#item-filter');
$filter.on('keydown', function () {
    delay(function () {            
        console.log('this will hit, once user has not typed for 1 second');            
    }, 1000);
});    

Risposta in ritardo ma la sto aggiungendo perché è il 2019 e questo è interamente realizzabile utilizzando piuttosto ES6, senza librerie di terze parti, e trovo che la maggior parte delle risposte di alto livello siano ingombranti e appesantite da troppe variabili.

Soluzione elegante tratta da questo eccellente post sul blog.

function debounce(callback, wait) {
  let timeout;
  return (...args) => {
      const context = this;
      clearTimeout(timeout);
      timeout = setTimeout(() => callback.apply(context, args), wait);
  };
}

window.addEventListener('keyup', debounce( () => {
    // code you would like to run 1000ms after the keyup event has stopped firing
    // further keyup events reset the timer, as expected
}, 1000))

Bene, a rigor di termini no, poiché il computer non può indovinare quando l'utente ha finito di digitare. Ovviamente è possibile attivare un timer al momento del ripristino e ripristinarlo a ogni successivo ripristino. Se il timer scade, l'utente non ha digitato per la durata del timer, è possibile chiamare "digitazione terminata".

Se ti aspetti che gli utenti facciano delle pause durante la digitazione, non c'è modo di sapere quando hanno finito.

(A meno che ovviamente non si possa capire dai dati quando sono stati fatti)

Penso che la soluzione sia un po 'più semplice con l' inputevento:

var typingTimer;
var doneTypingInterval = 500;

$("#myInput").on("input", function () {
    window.clearTimeout(typingTimer);
    typingTimer = window.setTimeout(doneTyping, doneTypingInterval);
});

function doneTyping () {
    // code here
}

sono d'accordo con la risposta di @going. Un'altra soluzione simile che ha funzionato per me è quella qui sotto. L'unica differenza è che sto usando .on ("input" ...) anziché keyup. Questo cattura solo le modifiche nell'input. altri tasti come Ctrl, Maiusc ecc. vengono ignorati

var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms (5 seconds)

//on input change, start the countdown

$('#myInput').on("input", function() {    
    clearTimeout(typingTimer);
    typingTimer = setTimeout(function(){
        // doSomething...
    }, doneTypingInterval);
});

Ho appena trovato un semplice codice per aspettare che l'utente finisca di scrivere:

passaggio 1. impostare il timeout su null quindi cancellare il timeout corrente quando l'utente sta digitando.

passaggio 2. innescare il timeout di cancellazione alla variabile da definire prima dell'attivazione dell'evento keyup.

passaggio 3.definire il timeout alla variabile sopra dichiarata;

<input type="text" id="input" placeholder="please type" style="padding-left:20px;"/>
<div class="data"></div>

codice javascript

var textInput = document.getElementById('input');
var textdata = document.querySelector('.data');
// Init a timeout variable to be used below
var timefired = null;

// Listen for keystroke events
// Init a timeout variable to be used below
var timefired = null;// Listen for keystroke events
textInput.onkeyup = function (event) {
clearTimeout(timefired);
timefired = setTimeout(function () {
    textdata.innerHTML = 'Input Value:'+ textInput.value;
  }, 600);
};

Stavo implementando la ricerca nel mio elenco e avevo bisogno che fosse basato su Ajax. Ciò significa che ad ogni cambio di chiave, i risultati cercati devono essere aggiornati e visualizzati. Ciò si traduce in così tante chiamate ajax inviate al server, il che non è una buona cosa.

Dopo un po 'di lavoro, ho adottato un approccio per eseguire il ping del server quando l'utente smette di digitare.

Questa soluzione ha funzionato per me:

$(document).ready(function() {
    $('#yourtextfield').keyup(function() {
        s = $('#yourtextfield').val();
        setTimeout(function() { 
            if($('#yourtextfield').val() == s){ // Check the value searched is the latest one or not. This will help in making the ajax call work when client stops writing.
                $.ajax({
                    type: "POST",
                    url: "yoururl",
                    data: 'search=' + s,
                    cache: false,
                    beforeSend: function() {
                       // loading image
                    },
                    success: function(data) {
                        // Your response will come here
                    }
                })
            }
        }, 1000); // 1 sec delay to check.
    }); // End of  keyup function
}); // End of document.ready

Noterai che non è necessario utilizzare alcun timer durante l'implementazione.

Questo è un semplice codice JS che ho scritto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head><title>Submit after typing finished</title>
<script language="javascript" type="text/javascript">
function DelayedSubmission() {
    var date = new Date();
    initial_time = date.getTime();
    if (typeof setInverval_Variable == 'undefined') {
            setInverval_Variable = setInterval(DelayedSubmission_Check, 50);
    } 
}
function DelayedSubmission_Check() {
    var date = new Date();
    check_time = date.getTime();
    var limit_ms=check_time-initial_time;
    if (limit_ms > 800) { //Change value in milliseconds
        alert("insert your function"); //Insert your function
        clearInterval(setInverval_Variable);
        delete setInverval_Variable;
    }
}

</script>
</head>
<body>

<input type="search" onkeyup="DelayedSubmission()" id="field_id" style="WIDTH: 100px; HEIGHT: 25px;" />

</body>
</html>

È possibile utilizzare l'evento onblur per rilevare quando la casella di testo perde lo stato attivo: https://developer.mozilla.org/en/DOM/element.onblur

Non è lo stesso di "smette di scrivere", se ti interessa il caso in cui l'utente digita un mucchio di cose e poi si siede lì con la casella di testo ancora focalizzata.

Per questo suggerirei di legare un setTimeout all'evento onclick, e supponendo che dopo x un periodo di tempo senza premere i tasti, l'utente ha smesso di digitare.

Perché non usare solo onfocusout?

https://www.w3schools.com/jsreF/event_onfocusout.asp

Se si tratta di un modulo, lasceranno sempre attivo tutti i campi di input per fare clic sul pulsante di invio in modo da sapere che nessun input perderà il richiamo del gestore di eventi onfocusout.

Se è necessario che l'utente si allontani dal campo, possiamo usare "onBlur" invece di Onchange in Javascript

  <TextField id="outlined-basic"  variant="outlined" defaultValue={CardValue} onBlur={cardTitleFn} />

Se ciò non fosse necessario, l'impostazione del timer sarebbe l'opzione valida.

Una volta rilevato lo stato attivo sulla casella di testo, al tasto su fai un controllo del timeout e ripristinalo ogni volta che viene attivato.

Al termine del timeout, esegui la tua richiesta Ajax.

Se stai cercando una lunghezza specifica (come un campo codice postale):

$("input").live("keyup", function( event ){
if(this.value.length == this.getAttribute('maxlength')) {
        //make ajax request here after.
    }
  });

Non sono sicuro che le mie esigenze siano piuttosto strane, ma avevo bisogno di qualcosa di simile a questo e questo è quello che ho finito per usare:

$('input.update').bind('sync', function() {
    clearTimeout($(this).data('timer'));            
    $.post($(this).attr('data-url'), {value: $(this).val()}, function(x) {
        if(x.success != true) {
            triggerError(x.message);    
        }
    }, 'json');
}).keyup(function() {
    clearTimeout($(this).data('timer'));
    var val = $.trim($(this).val());
    if(val) {
        var $this = $(this);
        var timer = setTimeout(function() {
            $this.trigger('sync');
        }, 2000);
        $(this).data('timer', timer);
    }
}).blur(function() {
    clearTimeout($(this).data('timer'));     
    $(this).trigger('sync');
});

Il che mi permette di avere elementi come questo nella mia applicazione:

<input type="text" data-url="/controller/action/" class="update">

Che viene aggiornato quando l'utente "ha finito di scrivere" (nessuna azione per 2 secondi) o passa a un altro campo (sfoca l'elemento)

Se hai bisogno di aspettare fino a quando l'utente non ha finito di scrivere, usa questo semplice:

$(document).on('change','#PageSize', function () {
    //Do something after new value in #PageSize       
});

Esempio completo con chiamata ajax - questo funziona per il mio cercapersone - conteggio degli articoli per elenco:

$(document).ready(function () {
    $(document).on('change','#PageSize', function (e) {
        e.preventDefault();
        var page = 1;
        var pagesize = $("#PageSize").val();
        var q = $("#q").val();
        $.ajax({
            url: '@Url.Action("IndexAjax", "Materials", new { Area = "TenantManage" })',
            data: { q: q, pagesize: pagesize, page: page },
            type: 'post',
            datatype: "json",
            success: function (data) {
                $('#tablecontainer').html(data);
               // toastr.success('Pager has been changed', "Success!");
            },
            error: function (jqXHR, exception) {
                ShowErrorMessage(jqXHR, exception);
            }
        });  
    });
});    

Più timer per pagina

Tutte le altre risposte funzionano solo per un controllo (la mia altra risposta inclusa). Se hai più controlli per pagina (ad es. In un carrello) verrà chiamato solo l'ultimo controllo in cui l'utente ha digitato qualcosa . Nel mio caso questo non è certamente il comportamento desiderato: ogni controllo dovrebbe avere il proprio timer.

Per risolvere questo, devi semplicemente passare un ID alla funzione e mantenere un dizionario timeoutHandles come nel seguente codice:

Dichiarazione di funzione:

var delayUserInput = (function () {
    var timeoutHandles = {};    
    return function (id, callback, ms) {        
        if (timeoutHandles[id]) {
            clearTimeout(timeoutHandles[id]);
        }

        timeoutHandles[id] = setTimeout(callback, ms);             
    };
})();

Uso funzione:

  delayUserInput('yourID', function () {
     //do some stuff
  }, 1000);

Semplice e facile da capire

var mySearchTimeout;
$('#ctl00_mainContent_CaseSearch').keyup(function () {
   clearTimeout(mySearchTimeout);
   var filter = $(this).val();
   mySearchTimeout = setTimeout(function () { myAjaxCall(filter); }, 700);
   return true;
});

Per passare parametri alla tua funzione insieme alla sintassi ES6.

$(document).ready(() => {
    let timer = null;
     $('.classSelector').keydown(() => {
     clearTimeout(timer); 
     timer = setTimeout(() => foo('params'), 500);
  });
});

const foo = (params) => {
  console.log(`In foo ${params}`);
}

Caspita, anche 3 commenti sono abbastanza corretti!

1. L'input vuoto non è un motivo per saltare la chiamata di funzione, ad esempio rimuovo il parametro waste dall'URL prima di reindirizzare

2. .on ('input', function() { ... });dovrebbe essere usato per innescare keyup, pasteed changeeventi

3. sicuramente .val()o .valuedeve essere usato

4. È possibile utilizzare la $(this)funzione di evento interno invece di #idlavorare con più input

5. (la mia decisione) Uso la funzione anonima anziché doneTypingin setTimeoutper accedere facilmente $(this)da n. 4, ma è necessario prima salvarlo comevar $currentInput = $(this);

EDIT Vedo che alcune persone non capiscono le indicazioni senza la possibilità di copiare e incollare il codice pronto. Ecco qua

var typingTimer;
//                  2
$("#myinput").on('input', function () {
    //             4     3
    var input = $(this).val();
    clearTimeout(typingTimer);
    //                           5
    typingTimer = setTimeout(function() {
        // do something with input
        alert(input);
    }, 5000);      
});