Q:

Uncouple range input in UI from synchronous javascript processes

I have an html5 input range element that sets the value on a processing intensive (largely synchronous) javascript function. 
The updated value has to be passed to the function with the mouse down on the input control at a fixed interval. The workaround of updating the value once the slider has settled (on change) is not an option.
To prevent the slider from lagging in the UI I'm trying to setInterval on the internal value readout from the input range element to only update the javascript function with new values every 500 miliseconds. 

$("#slider").on("change", function(){
  setInterval(function(){
    //Calculate intensive function with value from #slider
  },500);
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="slider">

The above code doesn't work because it freezes the UI. I'm sure there's an easier way than multithreading but I just can't wrap my head around this. 

A:

I guess my question wasn't clear when I first asked but I just stumbled upon this old post and wanted to share my solution: 
What I was looking for was a custom throttle function that executes the callback every n milliseconds. Here's how I did it:
throttle(function() {
         // calculation goes here...
         console.log('I only fire every 250 ms!');
         }, 250)();

function throttle(fn, throttleTime, scope) {
            throttleTime = throttleTime || 250;
            var last,
                deferTimer;
            return function () {
                var context = scope || this;
                var now = +new Date(),
                    args = arguments;
                if (last && now < last + throttleTime) {
                    // hold on to it
                    clearTimeout(deferTimer);
                    deferTimer = setTimeout(function () {
                        last = now;
                        fn.apply(context, args);
                    }, throttleTime);
                } else {
                    last = now;
                    fn.apply(context, args);
                }
            };
        }

