title: Javascript interval loop stuck
body: <p>I have a Javascript interval loop written that just sticks on the running part unless the buttons i made to stop it are clicked. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
    &lt;title&gt;JScript Loop&lt;/title&gt;
  
  
    &lt;script type="text/javascript" src="data.json"&gt;&lt;/script&gt;
    &lt;script type='text/javascript'&gt;//&lt;![CDATA[
    window.onload=function(){
    var stop = false;
    var go = false;
    var obj = document.getElementById("btn").addEventListener("click", function () {
        stop = true;
    });
    var obj = document.getElementById("btn2").addEventListener("click", function () {
        stop = false;
    });
  
    var interval;
  
    function loop() {
        var result = document.getElementById("result");
        var layout = document.getElementById("layout");
  
        if (!stop) {
            result.innerHTML = "Running...";      
        } else {
            result.innerHTML = "Stopped...";
        }
    }
    interval = setInterval(loop, 500);
  
  
        var result2 = document.getElementById("result2");
        do{
        var mydata = JSON.parse(data);    
          result2.innerHTML = mydata[0].name;
        }while(stop);
  
  
    }//]]&gt; 
  
    &lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
      &lt;p id="result"&gt;&lt;/p&gt;
    &lt;button id="btn"&gt;Stop&lt;/button&gt;
    &lt;button id="btn2"&gt;Start&lt;/button&gt;
    &lt;p id="result2"&gt;&lt;/p&gt;
    &lt;/body&gt;
  
    &lt;/html&gt;
  </code></pre>
  
  <p>What I was hoping to accomplish is that when the <code>mydata[0].name</code> is updated within the <code>data.json</code>. file that it will issue the stop to become false and reload the page. </p>
  
  <p>Basically this whole code is to load a variable from a data file for an iframe source, and so that if the data file hasn't changed, it keeps the same <code>src</code> for the iframe, but if that <code>mydata[0].name</code> variable changes, the page will reload and load the new <code>src</code> into the iframe. </p>
  
  <p>I've been stuck on this for the past few hours and just can't put it together on what I need to use to fix it.</p>
  
  <p>UPDATE 9/25/2015 Code changes</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;script src="jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;  
  &lt;script&gt;
  $.ajaxSetup({ cache: false });
  function loadChirp(){ //start function
  var ThePath;
     $.getJSON("http://127.0.0.1/data.json", 
          function(data){
              var CurPath = data.path;
              var ChkPath = data.path;
              display('Cur Path is: ' + CurPath);
          }); 
  } //end function 
  
  function tick(CurPath, ChkPath) {
      var CurPath = CurPath;  
      $.getJSON("http://127.0.0.1/data.json", 
          function(data2){
              display('Cur Path is: ' + CurPath);
              var ChkPath = data2.path;
              if(ChkPath !== CurPath) {
                  var ChkPath = data2.path;
                  var CurPath = data2.path;
                  display('ChkPath is: ' + ChkPath);
              }
  
          });
  }       
  function display(msg) {
      var p = document.createElement('p');
      p.innerHTML = msg;
      document.body.appendChild(p);
  }
  $(document).ready(function(){ 
  var CurPath;
  var ThePath;
  //DOCUMENT READY FUNCTION
  loadChirp();
  setInterval(tick, 30000); // Set for 1 Minute to use 1 hour its 3600000
  }); 
  //DOCUMENT READY FUNCTION 
  
  &lt;/script&gt;  
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>