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

发布于 2024-12-25 19:51:37 字数 598 浏览 1 评论 0原文

我正在尝试借助范围输入字段（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);
});

但这让人感觉非常迟缓。

处理此类大量数据的最佳方法是什么？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

兰花执着 2025-01-01 19:51:37

您的第二次尝试还不错，但它每次都会重置之前设置的超时 - 这意味着如果更改非常快，您直到最后才会获得更新。像这样的东西怎么样？

$(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 上有一个示例。

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.

回复收藏 0 原文

ヅ她的身影、若隐若现 2025-01-01 19:51:37

我建议在更改完成时发出 setVolume 事件（类似于 youtube）。例如，当您有音量滑块时，您可以单击它，按住它并更改音量。每次移动鼠标时，change 事件都会在 jQuery 中触发，该事件会按照您所说的方式堆积值。因此，您应该在 mouseUp 或类似的东西上执行此操作（jQuery UI 在其 slider 中为此提供了一些事件）。我想你明白了。

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

但最重要的是，我认为您应该尝试在客户端执行此操作，而忘记发出任何内容。除非有一个你实际上不能做的原因。

回复收藏 0 原文

~没有更多了~