Super Lagged / Unresponse Core After Start

General
8

Here’s the other half, complete jaavscript and html code.

<!DOCTYPE HTML>
<html>
<body>
<!--
 
 best version here

-->

<h1><b>Command App:</b></h1>
      <!-- form here 
        
        We need to map 90 to 30 : 0 mph to 5 mph or 12 pts = 1 mph 6 pts = .5 mph 3 pts = .25 mph 1.5 pts = .125 mph
        We then need to map 0 mph back to 90 - 30 for forward or 90 - 180 for backward function

      -->

      <h3>Set throttle speed</h3>
      <p>30 = top speed forward</p>
      <p>80 = slowest speed forward</p>
      <p>110 = slowest speed backward</p>
      <p>180 = fastest speed backward</p><br>

    <input type="range" name="degBox" id="degBoxId" min="0" max="180" step="1" value="90" list="myData">
    <!-- This adds the tick marks to the range but does not in Safari -->

    <datalist id="myData">

       <option value="0">
       <option value="30">
       <option value="60">
       <option value="90">
       <option value="120">
       <option value="150">
       <option value="180">

    </datalist>

    <br><br>

    <button id="minusbutton">&lArr; -5 &deg;</button>
    <button id="plusbutton">+5 &deg; &rArr;</button>

    <br><br>
    <P>Throttle Speed: <span id="curPos"></span><br>



    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>

      <!-- Javascript server side code -->
    <script type="text/javascript">
      //set credentials
      // set functions to call
      var deviceID    = "53ff6e066667574845592267";
      var accessToken = "6d3faea8e2c0d23c4fb78b1ca846c619855010ae";
      var speed = 90; // default speed changed from 40
      var currentCommand = '';


      // USELESS
      var fwd = "forward"; 
      // DONT NEED THESE //
      var tr = "turnright";
      var tl = "turnleft";
      var getFunc = "getpos";
      var setFunc = "setpos";
      // DONT NEED THESE //





/*
        //DEAD LEGACY CODE // 

      window.setInterval(function() {
        requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + getFunc + "/?access_token=" + accessToken;

        //Get form values
        $.getJSON(requestURL, function(json) {
                 document.getElementById("curPos").innerHTML = json.result + "&deg;";// this injects curPOS into the span ID!
                 document.getElementById("curPos").style.fontSize = "28px";
                 document.getElementById("degBoxId").value = parseInt(json.result);
                 });
      }, 1500);*/


      $('#degBoxId').val(speed); // sets any ID with degBoxId to value speed
      // If i want to do multiple things use class. i.e. if i have multiple degree boxes and I want to set them. 
      // use class anywhere I want it to be set. 
      //Updates now for first update


      $('body').on('keydown', function (event) { // whole page onclick
        if (event.keyCode === 40) {
          currentCommand = 'backward';
        }
        // arrow up
        else if (event.keyCode === 38) {
          currentCommand = 'forward';
        }
         // arrow left
        else if (event.keyCode === 37) {
          currentCommand = 'turnleft';
        }
         // arrow right
        else if (event.keyCode === 39) {
          currentCommand = 'turnright';
        }

        // request string
        var requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + currentCommand + "/";

                // execution post of request string
        $.post(requestURL, { params: speed, access_token: accessToken });
      });


      // like above block but for stopping. whenever I lift up on whatever arrow I have it stops 
      $('body').on('keyup', function () {
        var requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + currentCommand + "/";
        $.post( requestURL, { params: 90, access_token: accessToken });
      });



      //whenever the slider changes, it will update the current position by re-assigning speed value
      $('#degBoxId').on('change', function (event) {
        speed = event.target.value;
        $('#curPos').text(speed);//assigns ID #curPos the newly made speed
      });


      // decrementing down with fineAdjust function
      $('#minusbutton').on('click', function (event) {
        fineAdjust(-5);
      });


      // Incrementing 
      $('#plusbutton').on('click', function (event) {
        fineAdjust(5);
      });


      // Used in input form. Gets curPos string element value, changes it to an integer
      function fineAdjust(value) {
        var setValue = speed + value; //adds last value plus this one
        document.getElementById("degBoxId").value = setValue; // set degBoxId element value to setValue DISPLAY
        speed = setValue;
        //sp(setValue); //sets current position
      }



      /*
      //passive function
      function setValue(obj) {
        var newValue = document.getElementById('degBoxId').value; // grabbing element by ID. ID finds element, then extracts the value!
        speed = newValue; // call third function sparkSetpos, this will send the value to fwd . Starts with 90 aka zero
        //Calling sparkSetPos(90);
        document.getElementById("degBoxId").value = newValue;
      }
      */

    </script>
</body>
</html>

I’ve edited your post to properly format the code. Please check out this post, so you know how to do this yourself in the future. Thanks in advance! ~Jordy