JSFiddle - React, Tailwind, and code Playground

HTML

<p>Click me to get focus and then press a key for 500ms or longer.</p>

JavaScript

var timer0 = null;
var timer1 = null;
var time = 500;


$(document).on('keydown', function() {

		//console.log('keydown has been called');

    // init once, because for some keys (e.g. space, letters, etc.) 
    // this handler will be called consistently while you press the button.
    // some other buttons like "strg", "cmd", etc. will be called once only
		if(timer0 === null) {
    
        // exec in 500ms
        timer0 = setTimeout( function() {

          // now from exec each 500ms
          timer1 = setInterval( function() {

            $('body').append( '<div>I will be called each 500ms</div>' )
          }, time);  		
        }, time);
    }
});

$(document).on('keyup', function() {

  clearTimeout(timer0);
	clearInterval(timer1);
  
  timer0 = timer1 = null;
});