JSFiddle - React, Tailwind, and code Playground
HTML
<div id="console"></div>
JavaScript
// limit a function to only firing once every XX ms
var throttle = function (fn, delay){
var last = 0, timeout, args, context;
delay || (delay = 100);
return function (){
// we subtract the delay to prevent double executions
var now = +new Date, elapsed = (now - last - delay);
args=arguments, context=this;
function exec(){
// remove any existing delayed execution
timeout && (timeout = clearTimeout(timeout));
fn.apply(context, args);
last = now;
}
// execute the function now
if( elapsed > delay ) exec();
// add delayed execution (this could execute a few ms later than the delay)
else if( !timeout ) timeout = setTimeout(exec, delay);
};
};
$(window).mousemove(throttle(function (e) {
$("#console").prepend("<div>" + e.pageX + " " + e.pageY + "</div>");
}, 1000));
$(window).mousemove(throttle(function (e) {
$("#console").prepend("<div style='color: red;'>" + e.pageX + " " + e.pageY + "</div>");
}, 250));