1

好的，我现在很头疼，并试图解决这个问题几天但没有成功。我有一个 Ajax 函数，它位于 setInterval 内，每 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 秒，然后将其反转回来。非常感谢您的帮助 ：）

4

2 回答 2

2

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

$(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;
}
于 2013-07-22T16:06:03.760 回答
1

You could have a lastTimeResponse variable in the scope of the function passed to $(document).ready(), which through closure would remain available to the getRealData() function. Something like this (added lines with comments):

$(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();

});
于 2013-07-22T15:56:26.497 回答