的Json更新每x秒的se​​tInterval

Question

我做了這個劇本得到一些JSON信息：

$(document).ready(function(){ 

    $.ajax({ 
     url: 'url', 
     dataType: 'json', 
     cache: true, 
     timeout: 30000, 
     success: function(data) { 

      // $('#output ul').append('<li>The feed loads fine'); 
      $('#output ul').empty(); 

      $.each(data.posts, function(i,data){ 

       $('#output ul').append('<li><a href="'+data.image+'"><img class="thumb" src="'+data.image+'" alt="" /></a><h3>'+data.title+'</h3><p>'+data.text+'</p></li>'); 


      }); 

     }, 
     error: function(){ 
      $('#output ul').append('<li>Error'); 
     } 
    }); 
}); 

，但我想更新飼料每x秒。我讀了很多，但我可以完成它。

我該怎麼做？

Answer 1

使用setInterval重複調用的代碼塊，並把你的代碼在一些功能和傳遞函數名setInterval第一個參數。您可以傳遞匿名函數，而不是像repeatMe那樣創建一個新函數，但我更喜歡使函數使代碼更具可讀性。

function repeatMe(){ 
$.ajax({ 
    url: 'url', 
    dataType: 'json', 
    cache: true, 
    timeout: 30000, 
    success: function(data) { 

     // $('#output ul').append('<li>The feed loads fine'); 
     $('#output ul').empty(); 

     $.each(data.posts, function(i,data){ 

      $('#output ul').append('<li><a href="'+data.image+'"><img class="thumb" src="'+data.image+'" alt="" /></a><h3>'+data.title+'</h3><p>'+data.text+'</p></li>'); 


     }); 
    }, 
    error: function(){ 
     $('#output ul').append('<li>Error'); 
    } 
}); 
} 

setInterval(repeatMe, 5000); 

編輯這將是更好地使用setTimeout的，而不是setInterval的在成功發送下一個呼籲更新後第一完成其工作。我們還會將setTimeout置於錯誤狀態以保持重複呼叫進行更新。

function repeatMe(){ 
$.ajax({ 
    url: 'url', 
    dataType: 'json', 
    cache: true, 
    timeout: 30000, 
    success: function(data) { 
     // $('#output ul').append('<li>The feed loads fine'); 
     $('#output ul').empty(); 
     $.each(data.posts, function(i,data){ 

      $('#output ul').append('<li><a href="'+data.image+'"><img class="thumb" src="'+data.image+'" alt="" /></a><h3>'+data.title+'</h3><p>'+data.text+'</p></li>'); 
      setTimeout(repeatMe, 5000); 
     }); 
    }, 
    error: function(){ 
     $('#output ul').append('<li>Error'); 
     setTimeout(repeatMe, 5000); 
    } 
}); 
} 

Answer 2

var foo = function() { 
    $.ajax({ 
     url: 'url', 
     dataType: 'json', 
     cache: true, 
     timeout: 30000, 
     success: function(data) { 

      // $('#output ul').append('<li>The feed loads fine'); 
      $('#output ul').empty(); 

      $.each(data.posts, function(i,data){ 

       $('#output ul').append('<li><a href="'+data.image+'"><img class="thumb" src="'+data.image+'" alt="" /></a><h3>'+data.title+'</h3><p>'+data.text+'</p></li>'); 


      }); 

     }, 
     error: function(){ 
      $('#output ul').append('<li>Error'); 
     } 
    }); 
    setTimeout(foo, 3000); 
} 

foo(); 

3000是您希望再次調用函數之前等待的毫秒數。

Answer 3

setInterval(function(){ 

    $.ajax({ 
     url: 'url', 
     dataType: 'json', 
     cache: true, 
     success: function(data) { 

      // $('#output ul').append('<li>The feed loads fine'); 
      $('#output ul').empty(); 

      $.each(data.posts, function(i,data){ 

       $('#output ul').append('<li><a href="'+data.image+'"><img class="thumb" src="'+data.image+'" alt="" /></a><h3>'+data.title+'</h3><p>'+data.text+'</p></li>'); 


      }); 

     }, 
     error: function(){ 
      $('#output ul').append('<li>Error'); 
     } 
    }); 

},30000); //30000 == 30 seconds 

Answer 4

$(document).ready(function(){ 
    setInterval(function() { 
     $.ajax({ 
     url: 'url', 
     dataType: 'json', 
     cache: true, 
     timeout: 30000, 
     success: function(data) {  
      // $('#output ul').append('<li>The feed loads fine'); 
      $('#output ul').empty(); 

      $.each(data.posts, function(i,data){ 

       $('#output ul').append('<li><a href="'+data.image+'"><img class="thumb" src="'+data.image+'" alt="" /></a><h3>'+data.title+'</h3><p>'+data.text+'</p></li>'); 


      }); 

      }, 
      error: function(){ 
       $('#output ul').append('<li>Error'); 
      } 
     }); 
    }, 1000 * x); 
}); 

上面的代碼應該可以正常工作。只需在這裏放置所需秒數而不是x：1000 *x

請記住，您應該將指向函數的指針傳遞給setInterval作爲第一個參數。如果你只是簡單地使用setInterval($.ajax({...}), x)，那麼你應該每x秒執行一次由$ .ajax返回的函數。但它返回jQuery對象，而不是一個函數。這就是爲什麼在我的代碼阿賈克斯包裝function() {}