JQuery - 仅当两个连续的轮询没有相同的状态时才在div标签中递增计数器

I have a poller running in my Javascript, which calls a PHP file every 30 seconds.

我有一个在我的Javascript中运行的轮询器,它每隔30秒调用一个PHP文件。

The PHP file returns one of the following JSON in each interval. Sometimes, it could return the same JSON with same "status".

PHP文件在每个间隔中返回以下JSON之一。有时,它可以返回具有相同“状态”的相同JSON。

ex: 
    {"message":"Action","status":"pending"}
    {"message":"Update","status":"requested"}
    {"message":"Request","status":"processing"}
    {"message":"Delete","status":"completed"}

If the data in the status field received in two consecutive polls is not the same, I need to update a counter in a DIV (like your notification bubble)

如果在两个连续的民意调查中收到的状态字段中的数据不相同,我需要更新DIV中的计数器(如通知气泡)

Consider this application flow:

考虑这个应用程序流:

        1. When page loads, the counter in div tag is empty. 
             a. Poller runs the first time after 30 seconds.
             b. Poller receives pending status.
             c. Increment the counter in div tag.

        2. The counter in div tag is 1 now.
            a. Poller runs the second time after 30 seconds.
            b. Poller receives "requested" status.
            c. Increment the counter in div tag because the status received now is 
               different than what was received in the previous request.

        3. The counter in div tag is 2 now.
            a. Poller runs the third time.
            b. Poller receives the same "requested" status.
            c. DO NOT Increment the counter, because the status received 
               in #2 is the same as in #3.

How do I do this?

我该怎么做呢?

This is what I have so far in my OO JS:

这是我目前在我的OO JS中所拥有的:

    var Poller = {

        //This function runs as as poller every 30 seconds.
        monitorStatus: function()
        {
            $.ajax({
                type: 'POST',
                url: "/getStatus.php",
                dataType: "json",
                success: function(data)
                {
                    if(data == null)
                    {
                      return false;
                    }
                var status = data.status;
                if(typeof status !== "undefined")
                {
                    if(status != "")
                    {
                        Poller.updateDivCounter(status.toLowerCase(), data.message);
                    }
                }
            }
        });
    },

    updateDivCounter: function(status, message)
    {
        //ADD CODE TO MAKE SURE WE UPDATE THE COUNTER ONLY IF THE STATUS IN TWO 
          CONSECUTIVE POLLS IS NOT THE SAME.
        //......Need help

        //Increment the notificationCount DIV Tag
        $(".notificationCount").text( function (i,current) { return +current+1;} ) ;

        //Print the notification in notificationMessage Div tag
        $(".notificationMessage").text(message);
    }

}

1 个解决方案

#1

You just need to maintain a reference to the last status received:

您只需要保持对上次收到的状态的引用:

var Poller = {

    //// monitorStatus function

    lastStatus: "Initialized", // just needs to something other than one of the actual statuses

    updateDivCounter: function(status, message)
    {
        if (status === this.lastStatus) {
             return;   // don't do anything if the statuses match
        }

        this.lastStatus = status;

        //Increment the notificationCount DIV Tag
        $(".notificationCount").text( function (i,current) { return +current+1;} ) ;

        //Print the notification in notificationMessage Div tag
        $(".notificationMessage").text(message);
    }

}