Run JavaScript Function When User Finishes Typing Instead of on Key Up

var timer = null;    $('#text').keyup(function(){           clearTimeout(timer);            timer = setTimeout(doStuff, 1000)    });        function doStuff() {        alert('do stuff');    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input type='text' id='text'>

Run JS code when user finished typing

You basically want to use the keypress function. Your adjusted code:

$(function() {
  console.log('ready');
  var timer;
  var doneTypingInt = 5000;

  $('.typing').keypress(function(event){
    if(timer) {
        clearTimeout(timer);
        timer = null;
    }

    timer = setTimeout(doneTyping, doneTypingInt);
  });

  function doneTyping () {
    console.log('function doneTyping');
  }
});

Run javascript function when user finishes typing instead of on key up?

So, I'm going to guess finish typing means you just stop for a while, say 5 seconds. So with that in mind, let's start a timer when the user releases a key and clear it when they press one. I decided the input in question will be #myInput.

Making a few assumptions...

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 seconds 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
}

Call search function when user is done Typing

Debounce is 100% the way to go - it describes exactly what you're trying to do. Maybe you need a longer timer? Or there was something wrong with the debounce function?

I use a 250ms timer on the site I maintain's search box - but if it's a slower API or if it makes major page rewrites, you'd probably want to go larger.

Also check to make sure the input actually changed... e.g. store the last searched term and abort it in the search function if new input = old input

Calling function once when user starts typing and stops typing

i am pretty sure its a closure issue. this code example works just fine for reset the timer.


HTML:

 <input type="button" id="test">

JS:

let timer;
document.getElementById('test').addEventListener('click', () => {
  clearTimeout(timer);
  timer = setTimeout(callback, 1000);
})

function callback() {
  console.log('called');
}

Run javascript function when user finishes typing instead of on key up?

So, I'm going to guess finish typing means you just stop for a while, say 5 seconds. So with that in mind, let's start a timer when the user releases a key and clear it when they press one. I decided the input in question will be #myInput.

Making a few assumptions...

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 seconds 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
}

Wait for function till user stops typing

timer = 0;
function mySearch (){ 
    var xx = $(input).val();
    doSearch(xx); 
}
$(input).live('keyup', function(e){
    if (timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(mySearch, 400); 
});

it's better to move your function to a named function and call it multiple times, 'cause otherwise you're creating another lambda function on each keyup which is unnecessary and relatively expensive

How to trigger an event in input text after I stop typing/writing?

You'll have to use a setTimeout (like you are) but also store the reference so you can keep resetting the limit. Something like:

//// $('#element').donetyping(callback[, timeout=1000])// Fires callback when a user has finished typing. This is determined by the time elapsed// since the last keystroke and timeout parameter or the blur event--whichever comes first.//   @callback: function to be called when even triggers//   @timeout:  (default=1000) timeout, in ms, to to wait before triggering event if not//              caused by blur.// Requires jQuery 1.7+//;(function($){    $.fn.extend({        donetyping: function(callback,timeout){            timeout = timeout || 1e3; // 1 second default timeout            var timeoutReference,                doneTyping = function(el){                    if (!timeoutReference) return;                    timeoutReference = null;                    callback.call(el);                };            return this.each(function(i,el){                var $el = $(el);                // Chrome Fix (Use keyup over keypress to detect backspace)                // thank you @palerdot                $el.is(':input') && $el.on('keyup keypress paste',function(e){                    // This catches the backspace button in chrome, but also prevents                    // the event from triggering too preemptively. Without this line,                    // using tab/shift+tab will make the focused element fire the callback.                    if (e.type=='keyup' && e.keyCode!=8) return;                                        // Check if timeout has been set. If it has, "reset" the clock and                    // start over again.                    if (timeoutReference) clearTimeout(timeoutReference);                    timeoutReference = setTimeout(function(){                        // if we made it here, our timeout has elapsed. Fire the                        // callback                        doneTyping(el);                    }, timeout);                }).on('blur',function(){                    // If we can, fire the event since we're leaving the field                    doneTyping(el);                });            });        }    });})(jQuery);
$('#example').donetyping(function(){  $('#example-output').text('Event last fired @ ' + (new Date().toUTCString()));});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="example" /><p id="example-output">Nothing yet</p>