僅在其新內容時每3秒更新JavaScript

Question

我在面板中使用了引導主題廣告。 我有3個進度條，我想每3秒更新一次。 我設法用另一個頁面內容更新它們，這正是我想要做的。現在他們正在全天候更新，當它每3秒閃爍一次並且保持不變時，它非常煩人。 我只是想知道是否有一種方法來更新如果其他頁面的內容已更改？

編輯：有沒有任何方法也使它更新更好？而不只是閃爍？也許慢慢淡出。

這裏是我到目前爲止已經試過....

<script type="text/javascript"> 
(function($) 
{ 
    $(document).ready(function() 
    { 
     $.ajaxSetup(
     { 
      cache: false, 
      beforeSend: function() { 
       $('#nav_bar_top').hide(); 
       $('#loading').show(); 
      }, 
      complete: function() { 
       $('#loading').hide(); 
       $('#nav_bar_top').show(); 
      }, 
      success: function() { 
       $('#loading').hide(); 
       $('#nav_bar_top').show(); 
      } 
     }); 
     var $container = $("#nav_bar_top"); 
     $container.load("http://mywebsite.com/assets/ajax/get_bar.php"); 
     var refreshId = setInterval(function() 
     { 
      $container.load('http://mywebsite.com/assets/ajax/get_bar.php'); 
     }, 3000); 
    }); 
})(jQuery); 
</script> 

Answer 1

我不會循環阿賈克斯，但使用回調發出新的呼叫。

例如

var content = ""; 
var $container = $("#nav_bar_top"); 
loadIt(); 

其中

function loadIt() { 
    $.get("http://mywebsite.com/assets/ajax/get_bar.php",function(data) { 
    if (content != data) { 
     $container.html(data); 
     content=data; 
    } 
    setTimeout(loadIt,3000); 
    }); 
} 

要淡入和淡出嘗試

if (content != data) { 
     $container.fadeout("slow",function() { 
     content=data; 
     $this.html(data); 
     $this.fadein(slow); 
     }); 
    }