title: jquery get json with timeout
body: <p>.This is the code of my java script.I want to add error and timeout to my function when calling json with ajax...how can i do that..i am new to this..plz help..i am stuck..   </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;meta name="format-detection" content="telephone=no" /&gt;
          &lt;!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --&gt;
          &lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /&gt;
          &lt;link href="js/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/index.css"/&gt; 
          &lt;title&gt;Hello World&lt;/title&gt;
  
          &lt;script type="text/javascript" src="phonegap.js"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript" src="js/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/jquery.mobile-1.4.2.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
          $('#reposHome').bind('pageinit', function(event) {
              loadRepos();
          });
  
          function loadRepos() {
              $.ajax("https://api.github.com/legacy/repos/search/javascript").done(function(data) {
                  var i, repo;
                  $.each(data.repositories, function (i, repo) {
                      $("#allRepos").append("&lt;li&gt;&lt;a href='https://github.com/" + repo.username + "/" + repo.name + "'&gt;"
                      + "&lt;h4&gt;" + repo.name + "&lt;/h4&gt;"
                      + "&lt;p&gt;" + repo.username + "&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;");
                  });
                  $('#allRepos').listview('refresh');
                  setTimeout(function(){
                      loadRepos();
                   }, 5000);
            })
            .fail(function (xhr, ajaxOptions, thrownError) {
                   alert(xhr.statusText);
                   alert(xhr.responseText);
                   alert(xhr.status);
                   alert(thrownError);
              });
  
          }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div data-role="page" id="pagetwo"&gt;
  
      &lt;div data-role="header"&gt;
  
      &lt;h1&gt;My First page&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role="main" class="ui-content"&gt;
      &lt;p&gt;Welcome to My page&lt;/p&gt;&lt;br&gt;
  
    &lt;ul id="allRepos" data-role="listview"  data-filter="true"&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div data-role="footer"&gt;
      &lt;h1&gt;Footer Text&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/div&gt; 
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here i have also added the html part of my code..</p>