Регулятор громкости с помощью socket.io - слишком много данных

Question

Я пытаюсь создать регулятор громкости с помощью поля ввода диапазона (jQuery) и socket.io.

Я использую этот код для настройки громкости на всех прослушивающих устройствах.

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

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

Когда я на некоторое время перетаскиваю поле ввода диапазона, я замечаю, что очередь дел, похоже, накапливается.Какова лучшая стратегия для достижения адаптивного интерфейса при сохранении максимально возможной частоты обновления?

Я пытался сделать:

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

Но это заставляет его чувствовать себя очень вяло.

Каков наилучший способ обработки большого количества таких данных?

Answer 1

Ваша вторая попытка неплоха, но каждый раз она сбрасывает ранее установленное время ожидания - это означает, что если изменение происходит очень быстро, вы не получите обновление до конца. Как насчет чего-то вроде этого?

$(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;
        }  
    });
});

У меня есть пример на JSFiddle .

Answer 2

Я рекомендую генерировать событие setVolume по окончании изменения (что-то вроде youtube).Например, когда у вас есть слайдер для громкости, вы нажимаете на него, удерживаете его и меняете громкость.Каждый раз, когда вы перемещаете мышь, в jQuery запускается событие мыши change, которое складывает значения, как вы сказали.Так что вы должны сделать это на mouseUp или что-то вроде этого (пользовательский интерфейс jQuery предоставляет некоторые события для этого в slider).Я думаю, что вы поняли.

Если оставить это как есть, это, очевидно, убьет ваше приложение.

Но, прежде всего, я думаю, что вы должны попробовать сделать это на стороне клиента и забыть об эмиссии.что-нибудь.Если нет причины, которую вы на самом деле не можете.