title: Real time application with PHP and AJAX tends to hang and not respect the refresh interval
body: <p>I have written a small widget using PHP and AJAX that fetches real time information from a MySQL database every 10 seconds. The problem is that after a number of successful runs it tends to become buggy. It no longer respects the 10 seconds interval and even the time counter at the end of the widget tends to "jump" a number of seconds. The files look as it follows:</p>
  
  <p><strong>MySQL class:</strong>
  The database.class.php file contains the one single function which helps me connect to MySQL using PDO.  </p>
  
  <p><strong>The Device class:</strong>
  (as illustrated below) contains one function that helps me retrieve the last 10 entries from the database. The <code>readings_$id</code> (where <code>$id</code> is a number) table gets updated frequently.  </p>
  
  <pre><code>require_once dirname(__FILE__).'/database.class.php';
  
  class Device extends Database {
  
      public function get_last_ten_reads($id){
  
          $table = "readings_".$id;
          try {
              $statement = $this-&gt;connection-&gt;prepare("SELECT * FROM $table ORDER BY server_time DESC LIMIT 10");
              //Execute the statement:
              $statement-&gt;execute();
              //Get the result:
              $result = $statement-&gt;fetchAll(PDO::FETCH_ASSOC);
  
              return $result;
          } catch (PDOException $exception) {
              echo $exception -&gt; getMessage();
          }
      }
  
  }
  </code></pre>
  
  <p><strong>The widget file:</strong>  (attached bellow) creates a new device object, gets the id from the session variable and then gets the last ten entries using the mysql function above. After this finishes I set my object to null, since the operation will repeat again 10 seconds later. The file <code>init.core.php</code> contains the session_start, important included classes (such as the database), and important application constants (such as the <code>$id_device</code> stored inside a SESSION).</p>
  
  <pre><code>&lt;?php include_once($_SERVER['DOCUMENT_ROOT'].'/core/init.core.php');?&gt;
  &lt;?php $device    = new Device();?&gt;
  &lt;?php $id_device = $_SESSION['account']['id']; ?&gt;
  &lt;?php $entries   = $device-&gt;get_last_ten_reads($id_device); ?&gt;
  &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;h3 class="panel-title"&gt;Last 10 readings:&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="table-responsive"&gt;
          &lt;table class="table table-hover"&gt;
              &lt;thead&gt;
                  &lt;tr class="active"&gt;
                      &lt;th&gt;Id Sensor:&lt;/th&gt;
                      &lt;th&gt;Sensor Time:&lt;/th&gt;
                      &lt;th&gt;Server Time:&lt;/th&gt;
                      &lt;th&gt;Value:&lt;/th&gt;
                      &lt;th&gt;Battery level:&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;?php              
                  foreach ($entries as $row) { 
                  ?&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;?php echo $row['id_sensor'];?&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;?php echo $row['sensor_time'];?&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;?php echo $row['server_time'];?&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;?php echo $row['value'];?&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;?php echo $row['battery_level'];?&gt;&lt;/td&gt;
                      &lt;/tr&gt;  
  
                  &lt;?php } ?&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;?php $device = null;?&gt;
      &lt;div class="panel-footer"&gt;
          &lt;small&gt;Last updated at: 
              &lt;?php date_default_timezone_set('Europe/London');
              $date = date('Y-m-d H:i:s');
              echo $date ?&gt;
          &lt;/small&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>The jQuery / AJAX script:</strong></p>
  
  <pre><code>function get_reads(){
      var reads = $.ajax({
          type: "POST",
          url: ".././cards/widget.php",
          async: false,
          cache: false
      }).success(function(){
          setTimeout(function(){get_reads();}, 10000);
      }).responseText;
  
      $('.bootcards-list').html(reads);
  }
  setInterval(function(){get_reads();}, 10000);
  </code></pre>
  
  <p>Finally there is the index.php file:</p>
  
  <pre><code>&lt;?php
      include ('core/init.core.php');
      include ('header.php');
  ?&gt;
  &lt;!-- Begin page content --&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-12 bootcards-list"&gt;
              &lt;?php include('cards/widget.php');?&gt;
          &lt;/div&gt;
  
          &lt;script type="text/javascript" src="js/ajax.js"&gt;&lt;/script&gt;
  
      &lt;/div&gt; &lt;!-- /row --&gt;
  &lt;/div&gt;
  
  &lt;?php
      include ('footer.php');
  ?&gt;
  </code></pre>
  
  <p>The script works fine at the beginning but then it starts to malfunction (either hang or get buggy). Even the time at the bottom of the widget which shows when the information was last fetched from the database tends to refresh at an arbitrary amount of seconds which is not the one I given in the AJAX script. Did anyone encounter this issue before? </p>
  
  <p>P.S: Sorry for the very long read.</p>
  
  <p>Kindly,
  Radu </p>