JSFiddle - React, Tailwind, and code Playground

Timeout buffer for field change handlers

by tonytlwu

HTML

<input class="form-control" type="text" id="field" placeholder="Enter text here" />
<pre id="debug"></pre>

JavaScript

var TIMEOUT_BUFFER = 1000; // Timeout buffer in ms
var timer = null;

var changeHandler = function(e){
    $('#debug').html('Checking...');
};

$('#field').on( 'change blur input keyup paste', function(){
    clearTimeout(timer);
    var validURL = true; // Hardcoded as true for this prototype
    if ( validURL ) {
        $('#debug').html('Checking'); // Indication is given to the user straight away to show perceived responsiveness
        timer = setTimeout(changeHandler, TIMEOUT_BUFFER);
    }
} );