Question

我想要做的是每次增加或减少值时播放一点动画。使用此代码，我每秒都会从XML源更新我的值。只应在值增加时执行动画。因此，如果我的值为62并且更新为62，则不应执行任何动画。当我的值为62并且它更新为63时，那就是我希望这个动画发生的时候。有谁知道如何修改此代码以实现这一目标？

function updateAll()
{
$.ajax({
    type: "GET",
    url: "/ajax/ajax.updatedata.php",
    data: "",
    success: function(html){
        html = JSON.parse(html);

        if(html instanceof Object)                                 
        {
            // projecten
            $('#projecten-aantal').html(html['projecten'][0]['waarde']);
            $('#projecten-afgerond').html(html['projecten'][1]['waarde']);



            var projecten_aantal = parseInt(html['projecten'][0]['waarde']);
            var projecten_afgerond = parseInt(html['projecten'][1]['waarde']);

            var  sampleDataProjecten = [
                { naam: html['projecten'][0]['naam'], waarde: parseInt(html['projecten'][0]['waarde']), percent: parseFloat(html['projecten'][0]['percent'])},
                { naam: html['projecten'][1]['naam'], waarde: parseInt(html['projecten'][1]['waarde']), percent: parseFloat(html['projecten'][1]['percent'])}
            ];

            var settingsProjecten = {
                enableAnimations: false,
                source: sampleDataProjecten
            };
            $('#pie-chart-projecten').jqxChart(settingsProjecten);
            $('#pie-chart-projecten').jqxChart('refresh');

            // domeinwinkel
            var aantalRegistraties = 0;

            for(var i=0;i<=6;i++)
            {
                aantalRegistraties += parseInt(html['domeinwinkel'][i]['waarde']);
            }

            $('#domeinwinkel-registraties').html(aantalRegistraties);

            var  sampleDataDomeinwinkel = [
                { naam: html['domeinwinkel'][5]['naam'], waarde: parseInt(html['domeinwinkel'][5]['waarde']) },
                { naam: html['domeinwinkel'][4]['naam'], waarde: parseInt(html['domeinwinkel'][4]['waarde']) },
                { naam: html['domeinwinkel'][3]['naam'], waarde: parseInt(html['domeinwinkel'][3]['waarde']) },
                { naam: html['domeinwinkel'][2]['naam'], waarde: parseInt(html['domeinwinkel'][2]['waarde']) },
                { naam: html['domeinwinkel'][1]['naam'], waarde: parseInt(html['domeinwinkel'][1]['waarde']) },
                { naam: html['domeinwinkel'][0]['naam'], waarde: parseInt(html['domeinwinkel'][0]['waarde']) },
                { naam: html['domeinwinkel'][6]['naam'], waarde: parseInt(html['domeinwinkel'][6]['waarde']) }
            ];

            var settingsDomeinwinkel = {
                enableAnimations: false,
                source: sampleDataDomeinwinkel
            };

            $('#line-chart-domeinwinkel').jqxChart(settingsDomeinwinkel);
            $('#line-chart-domeinwinkel').jqxChart('refresh');

            // serverload
            var barcolors = new Array();

            //Serverload bars
            for(var i=0;i<=6;i++)
            {
                var setBarWidth = (parseFloat(html['servers'][i]['waarde'])/2)*100;
                if(setBarWidth > 100)
                {
                    barcolors[i] = 100;
                }
                else
                {
                    barcolors[i] = setBarWidth;
                }
            }

            $("[id^=serverload]").filter(function() {
                var i = this.id.substring(10),
                    width = barcolors[i-1];

                if (width !== undefined)
                    this.style.width = width + "%";

                return width > 50;
            }).addClass("redbar");

            $("[id^=serverload]").filter(function() {
                var i = this.id.substring(10),
                    width = barcolors[i-1];

                if (width !== undefined)
                    this.style.width = width + "%";

                return width <= 50;
            }).removeClass("redbar");
        }
        else
        {
            console.log('Fout bij het updaten van de data: html is geen array');
            console.log(html);
        }
    }
});

}

有关上述代码的更多信息：

上面的代码是更新值（包含文本内部和JQuery线和饼图的span元素），它将从包含以下序列（已翻译）的数据的XML文件中检索：

<root>
  <projects>
   <entry>
    <name>Total</name>
    <value>10</value>
    <percent>100</percent>
   </entry>
   <entry>
    <name>Finished</name>
    <value>5</value>
    <percent>50</percent>
   </entry>
  </projects>
  <tasks>
   <entry>
    <name>Total</name>
    <value>20</value>
   </entry>
  </tasks>
  etc.
</root>

XML文件将由cron作业更新，因此不会直接使用数据库或隐藏字段来保存值。

Answer 1

是的 - 保留一个代表你currentScore的公共变量。每次收到AJAX响应时，请检查找到的值并将其与您的公开currentScore进行比较。从那里，您可以使用简单的if条件来确定currentScore是否大于或小于返回值。

Answer 2

将当前值保留在隐藏字段中，当您收到响应时，请检查隐藏值，在完成逻辑后，使用更新后的值更新隐藏值。

每次使用AJAX更改值时执行函数

2 个答案: