JSFiddle - React, Tailwind, and code Playground

HTML

Mouse move on this red div. Then click and continue moving : the right counter must raise only once. But sometimes it raises 2 or 3 times before the first counter can run again...

<div id="test" style="width: 300px;height:300px; background-color: red;">
    
</div>
<input type="text" id="value" />
<input type="text" id="value2" />

JavaScript

var i = 0;
var j = 0;
var timeout;
var clicked = false;

document.getElementById("test").onmousemove = function() {
    
    // ignore first move (because onclick send a mousemove event)
    if (clicked) {
        clicked = false;
        return;
    }
    
    document.getElementById("value").value = i++; 
    clearTimeout(timeout);
}

document.getElementById("test").onclick = function() {
    // ignore multiple click
    if (clicked) return;
    
    sleep(1000);    
    clicked = true;   
}


function sleep(milliseconds) {
    
  /////////////////////////////////////
  // this block must not be updated !
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
  document.getElementById("value2").value = j++;
  //////////////////////////////////
    
  timeout =  setTimeout(function() {sleep(1000);}, 1);
}