Which JQuery event should be used to call a function ONCE at startup?

I have a slider that sets motor speed "oninput" and it works well.

<script type="text/javascript"> 

    var sliderAZ = document.getElementById("AZRange");
    var sliderEL = document.getElementById("ELRange");
    var outputAZ = document.getElementById("demoAZ");
    var outputEL = document.getElementById("demoEL");
    outputAZ.innerHTML = sliderAZ.value;
    outputEL.innerHTML = sliderEL.value;

    sliderAZ.oninput = function() {
        outputAZ.innerHTML = this.value;
        AzimuthSpeed();
    }

    sliderEL.oninput = function() {
        outputEL.innerHTML = this.value;
        ElevationSpeed();
    }

</script>

The problem is that I have to click on the slider (in the GUI) to get the initial input for speed. I would like to have the speed value loaded (and subsequently sent to the motor driver using JSON) like it is for the oninput event.

I have tried .ready for the document.

$(document).ready( function() {
        AzimuthSpeed();              
        ElevationSpeed(); 

This makes the program hang and the speed value is not shown on the web page. I'm guessing it's not even sending the default value for the speed?

I also tried using the "one" event to send the initial value once when the document is ready:

$(document).one( "ready", function() {
        AzimuthSpeed();              
        ElevationSpeed(); 

That didn't work either. Here is the slider HTML code:

<td>
    <div class="slidecontainer">
        <input type="range" min="2" max="150" value="30" class="slider" id="AZRange">
        <p>Speed: <span id="demoAZ"></span></p>
    </div>
</td>

The speed is sent to the driver using sockets:

// Send speed indicated on range slider for Azimuth motor
    function AzimuthSpeed()     { socket_mc.send("AZspeed" + sliderAZ.value); }
// Send speed indicated on range slider for Elevation motor
    function ElevationSpeed()   { socket_mc.send("ELspeed" + sliderEL.value); }

Speed is set using the slider per the top piece of code.

What event would you recommend to set the speed to the initial value of 30? Thanks for your input!

1 answer

  • answered 2018-01-11 20:46 Louys Patrice Bessette

    Assuming the oninput handlers are working. You call ElevationSpeed(); after having updated the innerHTML of a span, for the user to actually see the value which comes for that markup... Which is later updated by your slider.

    <input type="range" min="2" max="150" value="30" class="slider" id="AZRange">
    

    Now you just want to have an "initial" setted on load?
    See comment below, in code.

    <script type="text/javascript"> 
    
        var sliderAZ = document.getElementById("AZRange");
        var sliderEL = document.getElementById("ELRange");
        var outputAZ = document.getElementById("demoAZ");
        var outputEL = document.getElementById("demoEL");
        outputAZ.innerHTML = sliderAZ.value;
        outputEL.innerHTML = sliderEL.value;
    
        sliderAZ.oninput = function() {
            outputAZ.innerHTML = this.value;
            AzimuthSpeed();
        }
    
        sliderEL.oninput = function() {
            outputEL.innerHTML = this.value;
            ElevationSpeed();
        }
    
        // Why not just call the function on load here?
        AzimuthSpeed();
    
    </script>
    

    Now, the function has to exist before that call... That's all.