JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<input id="myInput" type="text" name="nyp" />

<div id="result">

</div>


<input id="altInput" type="text" name="nyp" />

<div id="altResult">

</div>

JavaScript

var typingTimer;                //timer identifier
var doneTypingInterval = 1500;  //time in ms
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
  $('#result').html( $input.val() );
}



var timer;
var timeout = 1500;

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