刷新只有改變

Question

我在一個div加載這樣的：

var auto_refresh = setInterval(
function() 
{ 
    $('#nowplaying').load('nowplaying.php').fadeIn("slow"); 
}, 10000); 

我想，如果有一個在頁面的改變只加載。 我怎樣才能做到「改變」？

這是我已經試過：

function() 
{ 
    var cachedDOM = $('div#nowplaying').html(); 
    $.get('nowplaying.php',function(data){ 
     if (cachedDOM != data) { 
     $('#nowplaying').load('nowplaying.php').fadeIn("slow"); 
     } 
    } 
    ) 
}, 3000); 

的問題是， 「cachedDOM =數據！」 始終是真實的。

帕特里克

Answer 1

所以你需要另一個頁面讓你知道它是否改變。

var auto_refresh = setInterval(function() { 
    $.get('check_change.php', function(data) { 
    if (data.changed) { 
     $('#nowplaying').load('nowplaying.php').fadeIn("slow"); 
    } 
    }); 
}, 10000); 

Answer 2

我想你的意思是改變了body。你可以這樣做：

var cachedDOM = $('body').html(); 
var auto_refresh = setInterval(
function() 
{ 
    if(cachedDOM != $('body').html()) 
     $('#nowplaying').load('nowplaying.php',function(){cachedDOM = $('body').html();}).fadeIn("slow"); 
}, 10000); 

Answer 3

查看dom突變事件。然後你將能夠檢查改變或不改變的東西。 https://developer.mozilla.org/en-US/docs/DOM/Mutation_events

Answer 4

而不是使用load，您可以使用ajax請求並將ifModified-Flag設置爲true。這隻會在頁面內容發生變化時給您一個定義的響應。服務器端可能需要更多設置（etag）才能使其工作。 此處鏈接到文檔：jquery ajax call

Answer 5

謝謝xdazz。 這就是我所做的：

var auto_refresh = setInterval(
function() 
{ 
function getcursong(){ 
var result = null; 
var scriptUrl = "get_current_song.php"; 
$.ajax({ 
    url: scriptUrl, 
    type: 'get', 
    dataType: 'html', 
    async: false, 
    success: function(data) { 
     result = data; 
    } 
}); 
return result; 
}  
gcs = getcursong(); 
okas = $('#song').html(); 
if (gcs != okas){ 
    $('#nowplaying').load('nowplaying.php').fadeIn("slow"); 
} 
}, 10000); 

Answer 6

，這是爲我工作：

$(document).ready(function() { 
    function loadData() { 
     $('#nowplaying').load('currentsong.php').fadeIn("slow"); 
    } 

    var result = null; 

    function checkdata() { 
     var scriptUrl = "currentsong.php"; 
     $.ajax({ 
      url: scriptUrl, 
      type: 'get', 
      dataType: 'html', 
      async: true, 
      cache: false, 
      success: function(data) { 
       if (result != data) { 
        result = data; 
        loadData(); 
       }; 
      } 
     }); 
    } 

    var auto_refresh = setInterval(function() { 
     checkdata(); 
    }, 4000); 
});