Question

I am trying to create a volume control with the help of a range input field (jQuery) and socket.io.

I am using this code to set the volume on all listening devices.

socket.on("setVolume", function (data) {
  $("#range").val(data);
});

$("#range").change(function() {
  socket.emit("setVolume", $("#range").val());
});

When I now drag the range input field for a while I notice that the queue of things to do seems to pile up. What is the best strategy to achieve a responsive interface while mainting the highest possible update rate?

I tried doing:

var timer;
$("#range").change(function() {
  window.clearTimeout(timer);
  timer = window.setTimeout(function() {
    socket.emit("setVolume", $("#range").val());
  },10);
});

But this makes it feel very sluggish.

What is the best way of handling lots of data like this?

Answer 1

Your second try isn’t bad, but it resets the previously set timeout each time–meaning if the change is very fast you won’t get an update until toward the end. How about something like this instead?

$(function() {
    var timer;
    var disabled = false;
    $("#slider").slider({
        slide: function() {
            if(disabled) { return; }
            timer = setTimeout(function() {
                disabled = false;
                $("#volume").html($("#volume").html() + "!");
            }, 100);
            disabled = true;
        }  
    });
});

I have an example up on JSFiddle.