title: Reload data with jQuery only when needed
body: <p>I am wondering if there exists a solution to reload data using jQuery only when is needed to. My current script is reloading every 1 second and it is overloading the website.<br>
  My script looks like this<br></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var timeleft=100;
  
  window.onload = function onLoad() {
  setInterval("reloadinfo()",1000);
  setInterval("updatetimer()",1);
  };
  
  function updatetimer() {
   var d = new Date();
      var n = 99-Math.round(d.getMilliseconds()/10);
   if(timeleft == 100) n = 0;
   if(n &lt; 0) n = 0
   if(n &lt; 10) $('#timeleft').text(timeleft+'.0'+n);
   else $('#timeleft').text(timeleft+'.'+n);
  }
  
  function reloadinfo() {
  $.ajax({
       type: "GET",
       url: "information.php",
   }).done(function (msg) {
       msg = $.trim(msg);
       if (msg != '[]') {
           var obj = jQuery.parseJSON(msg);
           $("#lga").html('&lt;img src="' + obj.ava + '" alt="avatar" width="115" height="115"&gt;&lt;/src&gt;');
           $("#lg").text("#" + obj.name);
           $("#lgi").text(obj.age);
           $("#lgv").text('$' + obj.school);
           $("#lgc").text(obj.promo + '%');
           $("#lt").text(obj.class);
           $("#lwn").text(obj.mark);
       }
   });
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would like to use the function <strong>reloadinfo()</strong> only after 10 seconds the <strong>timeleft</strong> inside <strong>updatetimer()</strong> reaches 0.</p>