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

我建议在更改完成后发出setVolume事件（类似youtube）。例如，当您有音量滑块时，单击它，按住它并更改音量。每次移动鼠标change事件都会在jQuery中触发，如你所说的那样堆积值。所以你应该在mouseUp或类似的事情上做这件事（jQuery UI在他们的slider中提供了一些事件）。我想你明白了。

保持原样显然会杀死你的应用。

但最重要的是，我认为你应该尝试在客户端做这件事而忘记发出任何东西。除非有理由你实际上不能。

Answer 2

你的第二次尝试也不错，但它每次都会重置之前设置的超时 - 这意味着如果更改速度非常快，那么直到最后才能获得更新。这样的事情怎么样呢？

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

我有example up on JSFiddle。

使用socket.io进行音量滑块控制 - 数据太多

2 个答案: