JSFiddle - React, Tailwind, and code Playground

by Angel Rodriguez

HTML

Event (Write Something) <input type="text" name="texto" id="texto" ><br />
KeyDown Catching: <div id="buscando"></div><br />

<!-- TIME PERFORMANCE -->
<br /><br /><b>Testing Performance:<br></b>
Current Time: <div id="timer">0.00</div><br />
Max Time: <div id="maxtimer">0.00</div> > Query: <div id="querymaxtimer"></div><br />
<!-- End -->

CSS

#texto,#buscando,#timer,#maxtimer,#querymaxtimer{margin:3px 0;border:1px solid #000;padding: 5px 20px;display: inline-block;}

JavaScript

/* Global Vars */
	var inputSearch = document.getElementById('texto');
	var buscando = document.getElementById('buscando');

	/* TIME PERFORMANCE > Catching */
	var timer = document.getElementById('timer');
	var maxtimer = document.getElementById('maxtimer');
	var qmaxtimer = document.getElementById('querymaxtimer');
	
    /* Adding Event */    
	if(window.addEventListener)
	{inputSearch.addEventListener('keyup',searching,false);}
	else
	{if(window.attachEvent){inputSearch.attachEvent('keyup',searching);}}

    /* Test Function */
	function searching(event,callback)
	{
	
		/* TIME PERFORMANCE */
		/* >> Timer Ini */  var i = performance.now();
		
        
        
        /* Do something........ */
		var query = this.value;
		buscando.textContent = query;
        /* Finish something ......... */

        
        
	    /* TIME PERFORMANCE */
		/* >> Timer End */	
        var f = performance.now();
		/* >> TotalTime */	
        var totalTime = f - i;
        var t;
        if(totalTime < 1){
            if(totalTime<=0.0001){t= ' Nanoseconds?';}
            else{t= ' Microseconds';}
        }else{t = ' Miliseconds'};
        
        /* >> Tiempo Maximo   */  
        var mt = parseFloat(maxtimer.textContent);         
        if(totalTime > mt){
            maxtimer.textContent = totalTime.toFixed(15) + t; 
            qmaxtimer.textContent=query;
        }
        
        /* >> Tiempo Actual   */ 
        timer.textContent = totalTime.toFixed(15) + t;
        
        
	}