Question

好的，我现在头痛不已，试图解决这个问题几天但没有成功。我有一个在setInterval中的Ajax函数，每2秒从数据库中提取一个新数据。

Ajax使用来自数据库的动态数据创建一个“div”作为一些数字。现在，我想要实现的是，当拉出新数据或DOM中的文本或值发生变化时，我希望特定的div做一些动画。

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

这是我的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();

   });

这是输出： enter image description here

因此，假设时间响应发生变化，然后将背景变为红色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;
}

Answer 2

您可以在传递给lastTimeResponse的函数范围内有一个$(document).ready()变量，该变量通过闭包仍然可用于getRealData()函数。像这样的东西（添加了注释行）：

$(document).ready(function () {

    // add a variable that remains through closure
    var lastTimeResponse = [];

    function getRealData() {
        $.ajax({
            url: 'test_api.php',
            data: "",
            dataType: 'json',
            success: function (rows) {
                var changedRows = [];
                var text = '';
                var text2 = '';
                for (var i in rows) {
                    var row = rows[i];
                    var timeRespons = row[4];
                    text += '<div class="square r'+i+'"><h4>Time Response: '+ timeRespons+'</h4>';
                    text += '</div>';
                    // check the conditions for animation to happen
                    if (lastTimeResponse[i] !== timeRespons)
                    {
                        changedRows.push(i);
                    }

                    // store the most recent value
                    lastTimeResponse[i] = timeRespons;
                }
                $("#journey").html(text);
                for (var j=0; j<changedRows.length; j+=1)
                {
                    $(".square.r"+changedRows[j]).animate(/*your animation here*/);
                }
            }
        });
    }

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

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

});

当Ajax提取新数据时，jQuery检测div（文本/值）更改

2 个答案: