檢查並比較新值，並根據該值進行動畫

Question

如何檢查DOM中的值是否有變化？我正在調用Ajax函數從數據庫中提取一些數據。如果新值被推動，我想眨眼或做一些動畫那個特定的DIV。所以當「可用性」變化時，動畫只會一次。僅限於價值發生變化的DIV。

這裏是我的代碼：

//function the get data from database 
function getRealData() { 
    $.ajax({ 
     url: 'test_api.php', 
     data: "", 
     dataType: 'json', 
     success: function (rows) { 

      var text = ''; 

      for (var i in rows) { 

       var row = rows[i]; 

       var availability = row[3]; 
       var hostName = row[2]; 
       var intranet = row[6]; 
       var timeRespons = row[4]; 


       //console.log(availability); 

       if (availability == 0){ 
        var img = "img/tick.png"; 

       } 

       if (availability == 1){ 
        var img = "img/warning.png"; 
       } 

       if (availability == 2){ 
        var img = "img/alert.png"; 
       } 

       text+= '<section class="square"><h3> ' + intranet + '</h3><img src='+img+' width="70" height="70" rel='+availability+' alt="warning"/><h4><img src="img/time_icon.png" width="20" height="20" alt="clock" class="clock" /> '+ timeRespons+'</h4>'; 
        text += '</section>'; 



       } 
      $("#journey").html(text); 


     } 
    }); 
} 

//this refreshes data every 2seconds 
setInterval(getRealData, 2000); 

//call the function to display data 
getRealData(); 

非常感謝您的幫助！

EDIT

輸出爲：

<div id="journey"> 
    <div class="square>availability: 0 hostName: aaa intranet: ttt timeResponse:0.124</div> 
    <div class="square>availability: 0 hostName: qqq intranet: hhh timeResponse:0.064</div> 
    <div class="square>availability: 0 hostName: www intranet: nnn timeResponse:0.303</div> 
    <div class="square>availability: 0 hostName: rrr intranet: rrr timeResponse:0.019</div> 
    <div class="square>availability: 0 hostName: eee intranet: uuu timeResponse:0.025</div> 
    <div class="square>availability: 0 hostName: ggg intranet: ooo timeResponse:0.158</div> 
</div> 

Answer 1

一個簡單的解決辦法是保持一個變量包含當前文本之外的功能，然後寫入該每次您getRealData()函數被調用。例如：

var currentText; 
function getRealData() { 
    $.ajax({ 
    url: "...", data: "...", dataType: "...", 
    success: function(rows){ 
     var text = '' 
     // Process text variable accordingly, as you have 
     if (text != currentText){ 
     $("#journey").html(text).performBlinkEvent(); 
     currentText = text; 
     } 
    } 
    }); 
} 

的performBlinkEvent功能可以與搜索可以容易地發現，例如this是一個交該捲起。

編輯：另一種選擇是通過成功的所有<section class="square">元素進行迭代，寫作上的成功每個元素而不是包含#journey類全：

function (rows) { 
    // Get all squares and iterate over each 
    var squares = $("#journey > .square").each(function(i) { 
    var row = rows[i]; 
    var availability = row[3]; 
    var hostName = row[2]; 
    var intranet = row[6]; 
    var timeRespons = row[4]; 
    // construct img var based on availabiliy 

    var text = ... // Construct content of <section class="square"> 

    if ($(this).text() != text){ 
     $(this).html(text).performBlink(); 
    } 

    }); 
} 

這是假設部分是已經在頁面上，我認爲這是一個合理的假設。它還假設您收到的行與頁面中的章節數之間存在1對1的對應關係。如果不是這樣（即每個響應的平方數會改變），則需要進一步的邏輯。

這是第二個代碼片段的JSFiddle。我用數據填充了幾個元素，然後創建一個包含舊數據和一些新數據的示例響應。該功能將成功確定需要插入哪些數據並突出顯示更新的元素。

它需要根據回調接收的具體數據進行調整（正如我在問題的評論中指出的那樣，似乎不大可能實際上是從JSON響應接收數組的數組），但我希望這演示如何實現您的目標。

Answer 2

好吧，我想我現在明白你的問題。

function getRealData() { 
$.ajax({ 
    url: 'test_api.php', 
    data: "", 
    dataType: 'json', 
    success: function (rows) { 

     var text = ''; 

     for (var i in rows) { 

      var row = rows[i]; 

      var availability = row[3]; 
      var hostName = row[2]; 
      var intranet = row[6]; 
      var timeRespons = row[4]; 


      //console.log(availability); 

      if (availability == 0){ 
       var img = "img/tick.png"; 

      } 

      if (availability == 1){ 
       var img = "img/warning.png"; 
      } 

      if (availability == 2){ 
       var img = "img/alert.png"; 
      } 

      text+= '<section class="square new"><h3> ' + intranet + '</h3><img src='+img+' width="70" height="70" rel='+availability+' alt="warning"/><h4><img src="img/time_icon.png" width="20" height="20" alt="clock" class="clock" /> '+ timeRespons+'</h4>';//added a class called new in the section here 
       text += '</section>'; 



      } 
     $("#journey").html(text); 


    } 
}); 

     $(".square.new").each(function(){//wrote code to animate and remove the new class 
      $(this).effect("highlight", {color: 'red'}, 3000); 
      $(this).removeClass("new"); 
     }); 
} 

    //this refreshes data every 2seconds 
    setInterval(getRealData, 2000); 

    //call the function to display data 
    getRealData();