时间戳

首页 > 解决方案 > 使用jQuery滑块通过串行发送数据

javascript - 使用jQuery滑块通过串行发送数据

问题描述

这是我关于堆栈溢出的第一个问题，所以我想向大家问好。我今天的问题如下...

我正在尝试使用 jQuery UI 滑块通过 TCP/IP 将值发送到 Arduino 的串行端口。

我已经完成了通信部分（TCP 和串行）。问题是，每当用户移动滑块时，沿途的每个值都会非常迅速地一个接一个地发送。我想延迟滑块，以便它在每一步之间以 100 毫秒的延迟发送这些值。

我尝试使用“setInterval”和“clearInterval”但没有成功。这是代码：

$(document).ready(function() {

    $( "#mySlider" ).slider({
        range: "min",
        min: 0,
        max: 180,
        value: 90,
        slide: function( event, ui ) {

        delayPan(ui.value);


        }   
});

$( "#total" ).val( $( "#mySlider" ).slider( "value" ) );

});



var timeOut;

function delayPan(vals) {

    $( "#total" ).val("$" +  vals );

    //the part below sends values to another PHP file in order to then send it using TCP/IP

    timeOut = setInterval(function()
    {

        $.get("insert_commands.php", {command: 39, parameter: 0, value: vals, number: 0}, 
        function(command,parameter,value,number){}, "json");

    }, 100);

    clearInterval(timeOut); 

}

为了更清楚起见，这里是我 index.php 网站上滑块的 HTML：

<label for="total">ANGLE:</label>
<input type="text" id="total" style="border:0; color:#fa4b2a; font-weight:bold;">
</p>
<div id="mySlider"></div>

我不知道如何解决这个问题 - 我对 javascript/jQuery 很陌生。我可以延迟 Arduino 或 TCP 套接字上的接收，但主网站上还有其他按钮设置了不同的延迟，所以如果可能的话，我需要在 jQuery 中进行。

我会很感激任何建议。

谢谢罗伯

标签： javascriptjqueryhtmlcssuser-interface

解决方案

恭喜你写得很好。

我认为您正在查看的是Debounced 或 Throttled功能（取决于您要发送新值的次数）。在您的情况下，您想要“限制”该函数 - 这意味着限制调用它的频率。

所以我们可以每 100 毫秒限制一次位置发送功能。这样，即使滑块位置在 100 毫秒内改变了 25 次，AJAX 请求也只会在这 100 毫秒内发送一次。

Lodash 和 Underscore 都为您提供了 Debounce 和 Throttling 函数的可能性。Ben Alman 还为 Debounce/Throttling提供了一个小型库（不再维护）。我只能代表 Ben Alman 的图书馆，因为那是我唯一使用过的图书馆。

我创建了一个 Codepen 来演示。单击以查看它的实际效果。 以下是相关代码：

$(document).ready(function() {

  function delayPan(vals) {

    $( "#total" ).val("$" +  vals );

    //the part below sends values to another PHP file in order to then send it using TCP/IP
    $.get("insert_commands.php", {command: 39, parameter: 0, value: vals, number: 0}, function(command,parameter,value,number){}, "json");
 }

    const throttledDelayPan = $.throttle(1000, delayPan);

    $( "#mySlider" ).slider({
        range: "min",
        min: 0,
        max: 180,
        value: 90,
        slide: function( event, ui ) {
            throttledDelayPan(ui.value);
         }   
    });

  $( "#total" ).val( $( "#mySlider" ).slider( "value" ) );

});

基本上，您声明一个发送 AJAX 请求的函数。delayPan，在你的例子中。

然后将它传递给 Throttle 库的节流函数 ( $.throttle)，以及节流时间（在本例中为 1000 毫秒，以演示延迟）。

throttle 函数返回另一个函数，我们将它存储在 throttledDelayPan 中。

最后，我们在 jQuery UI Slider 的“slide”回调中调用了 throttledDelayPan。

顺便说一句，我有一些建议：

  1. 如果您特别想将数据发送到 REST API，我会劝阻您不要使用 GET 请求 - 使用 POST 请求会更惯用。
  2. 您可能希望将其分为两个函数 - 发送 AJAX 请求的节流函数和更新“#total”显示的函数。这样，您可以不断更新显示，同时仍然减少您发送的 AJAX 请求的数量。

推荐阅读