Initial Delay for Event(mousedown)?

Question

<!DOCTYPE html>
<html onmouseup="end()">
 <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
    var counter;
    var count = 0;

          
    function start(outp)
    {
        counter = setInterval(function()
        {
          console.log(count);
          add(outp);
          count++;
        },500);
    }
    function end()
    {
    clearInterval(counter);
    }
      
      
    function add(outp)
    {
    window.document.form1.Display.value =
    window.document.form1.Display.value + outp;
    }
       </script>

 </head>
 <body >
    <form name="form1">
        <button onmousedown="start('x')"onmouseleave="end()" >Click and hold</button>
        <input type="text"name="Display"class="display"readonly>
    </form>
 </body>
</html>

Thats the snippet, the "500" is the delay between each iteration but I have no Idea how to specify the initial delay.

The button normally also has an Onclick event and I want the onmouse event to be triggered after X amount of time.

[`setTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout). — Unmitigated, Jul 15 '20 at 14:50
setTimeout is you implementing your own debounce. Look at the first two answers to this question. https://stackoverflow.com/questions/8055923/javascript-jquery-add-debounce-to-a-button — Akin Okegbile, Jul 15 '20 at 15:12

score 0 · Answer 1 · answered Jul 15 '20 at 14:56

Try setting an initial timeout and doing your logic in there, and then also setting the interval with the same logic.

setTimeout(() => {
  console.log(count);
  add(outp);
  count++;
  counter = setInterval(() =>
    {
      console.log(count);
      add(outp);
      count++;
     }, 500);
}, initialTimoutMs);

Initial Delay for Event(mousedown)?

1 Answers1