Solution 1 :

Congratulations on a well-written question.

I think what you’re looking at is a Debounced or Throttled function (depending on how many times you want to send the new value). In your case, you want to “throttle” the function- that means, limit the frequency at which it’s called.

So we could throttle the position-sending function at every 100ms. That way, even if the slider position is changed 25 times in 100 ms, the AJAX request will only be sent one time in that 100ms.

Lodash and Underscore both give you possibilities for Debouncing and Throttling a function. Ben Alman also offers a tiny library (no longer maintained) for Debouncing/Throttling. I can only speak for Ben Alman’s library, because that’s the only one I’ve used.

I’ve created a Codepen to demonstrate. Click to see it in action.
Here’s the relevant code:

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

});

Basically, you declare a function that sends the AJAX request. delayPan, in your example.

Then you pass it into the Throttle library’s throttle function ($.throttle), along with a throttle time (1000ms in this case, to demonstrate the delay).

The throttle function returns you another function, which we store at throttledDelayPan.

Finally we call throttledDelayPan in the “slide” callback of the jQuery UI Slider.

As an aside, I have some recommendations:

  1. I would dissuade you from using a GET request if you specifically want to send data to a REST API- it would be more idiomatic to use a POST request.
  2. you may wish to separate this into two functions- the throttled function that sends the AJAX request, and the function that updates the “#total” display. That way, you could continuously update the display while still reducing the number of AJAX requests you are sending.

Solution 2 :

you have two solutions to this

1 don’t call delay function from slider just make the interval always sending the current value of the slider every 100ms, also remove the clearInterval(timeOut);

2 make timeDelta to limit the Generating of the Get Requests

like this
https://codepen.io/vkv88/pen/PoqGzJE?editors=1000

Problem :

This is my first question on stack overflow so I’d like to say hello to everyone. My question today is as follows…

I am trying to use a jQuery UI slider to send values over TCP/IP to Arduino’s serial port.

I have the communication part pretty much done (TCP and serial). The problem is that whenever the user moves the slider, every value along the way is sent one after another very rapidly. I’d like to delay the slider so that it sends those values with a 100ms delay between every step.

I’ve tried to use ‘setInterval’ and ‘clearInterval’ with no success. Here is the code:

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

}

And for more clarity, here is the slider’s HTML on my index.php website:

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

I am not sure how to go about solving this- I am pretty new to javascript/jQuery. I could just delay the reception on Arduino or TCP socket but there are other buttons on the main website with different delays set so I need to do it in jQuery if possible.

I’d appreciate any advice.

Thank you
Rob

Comments

Comment posted by Rkv88 – Kanyan

hi tell me how many signals you receiving , i think with the delay you receive data only once right?

Comment posted by RobZ

Hey Bash Naimi-Roy! Your solution works and does exactly what I needed. Thank you very much.

By