JSFiddle - React, Tailwind, and code Playground

by gunderson

HTML

<div id="inputSquare"></div>

CSS

#inputSquare{
    width: 200px;
    height: 200px;
    background: #222;
}
#inputSquare.activated{
    background: #a22;
}

JavaScript

var severQueue = [];
var delay;

$("#inputSquare").mousemove(onMouseMove);

function onMouseMove(){
    if (delay){
       clearTimeout(delay);
    }
    serverQueue.push("doSomething")
    delay = setTimeout(sendToServer, 1000);
}

function sendToServer(){
    console.log(serverQueue.length);
    delay = null;
    $("#inputSquare").addClass("activated");
    // do some ajax using serverQueue
    // we'll just simulate it with another timeout
    for (var i in serverQueue){
        serverQueue.pop();
    }
    onComplete = setTimeout(onAjaxComplete, 1000);
}

function onAjaxComplete(){
    $("#inputSquare").removeClass("activated");
}