当Ajax拉取新数据时，jQuery检测div(文本/值)的变化

Question

好吧，我现在很头疼，尝试了几天解决这个问题，但没有成功。我有一个位于 setInterval 内的 Ajax 函数，每 2 秒从数据库中提取一个新数据。

Ajax 使用来自数据库的动态数据创建一个“div”作为一些数字。现在，我想要实现的是，当提取新数据或 DOM 中的文本或值更改时，我希望特定的 div 执行一些动画。

假设它将背景颜色更改为红色，然后反转为默认颜色，或者 div 边框将闪烁 3 次，等等。不知何故，我无法完成这项工作。我尝试了不同的事件监听器，但没有成功。

这是我的 Ajax 代码:

$(document).ready(function () {



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

                         var text = '';

                         var text2 = '';

                         for (var i in rows) {

                             var row = rows[i];


                             var timeRespons = row[4];

                             text+= '<div class="square"><h4>Time Response: '+ timeRespons+'</h4>';

                             text += '</div>';

                             }

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

                        }
                 });


             }

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

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

   });

这是输出:

假设时间响应发生变化，则将背景设为红色 2 秒，然后将其反转回来。非常感谢您的帮助:)

Answer 1

如果您想比较响应之间的值，那么您可以创建一个始终存储最后一个响应的局部变量。

$(document).ready(function () {
    var lastResponse = null;

在每个成功的 AJAX 响应中，您将新响应与上一个响应进行比较，并决定是否有必要为任何新 div 设置动画。

success: function (rows) {

    var text = '';
    var text2 = '';
    for (var i in rows) {
        var row = rows[i];
        var timeRespons = row[4];
        if (lastResponse && lastResponse[i][4] !== timeRespons)
        {
            // this specific 'row' has a different value than last time
            text += '<div class="square" style="background-color:red;"><h4>Time Response *changed*: '+ timeRespons+'</h4></div>';
        }
        else
        {
            // otherwise
            text += '<div class="square"><h4>Time Response: '+ timeRespons+'</h4></div>';
        }
    }

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

    // save this response as last response
    lastResponse = rows;
}