当某些内容发生更改时，联机运行JavaScript/Jquery脚本_Javascript_Jquery

当某些内容发生更改时，联机运行JavaScript/Jquery脚本

javascript jquery

当某些内容发生更改时，联机运行JavaScript/Jquery脚本,javascript,jquery,Javascript,Jquery,我试图仅在页面上发生更改时运行$.post（）脚本。如果发生相同的情况，那么脚本应该只运行一次。如果发生更改，则脚本应运行一次，而不是重复运行。此脚本位于每5秒运行一次的setInterval函数中这是迄今为止我所拥有的一个例子 setInterval(function(){ var status = ""; $(selector).each(function(key,val){ if($(val)[0].className == "A") {

我试图仅在页面上发生更改时运行$.post（）脚本。如果发生相同的情况，那么脚本应该只运行一次。如果发生更改，则脚本应运行一次，而不是重复运行。此脚本位于每5秒运行一次的setInterval函数中

这是迄今为止我所拥有的一个例子

setInterval(function(){
    var status = "";
    $(selector).each(function(key,val){
        if($(val)[0].className == "A")
        {
            status = "online";
        }
        else
        {
            status = "offline";
        }

            $.post("url",{status:status});
    });
},5000);

在这种情况下，$.post脚本将每5秒运行一次。即使是如果状态==“脱机”连续20次。即使是如果status==“online”连续20次

关于如何只运行一次而不是20次$.post（）脚本，有什么想法吗？我在想一些if/else语句。。但是我已经在细节上迷失了…

如果我正确地理解了你的问题，你只需要记住之前的值，然后检查现在的值是否不同：

    var oldStates = {};
    setInterval(function(){
        var status = "";
        var differences = {};
        $(selector).each(function(key,val){
            if($(val)[0].className == "A")
            {
                status = "online";
            }
            else
            {
                status = "offline";
            }
            if(oldStates[key] != status){
              differences[key] = status;
            }
            oldStates[key] = status;

        });

        if(differences.length){
          $.post("url",{differences:differences});
        }
    },5000);

说明：

您保存所有的

旧状态

，这样您就可以知道每个用户在您上次检查所有状态时是离线还是在线。如果他的

状态

已更改，则将他保存在

差异

数组中。如果至少有一个用户更改了其

状态（If（differences.length）{
），则将数据发送到服务器。
按以下方式执行：
var status = '';
$(selector).each(function(key, value){
    if( /*... your condition ..*/ ) {
        status = 'update';
    } // no else
});

if( status == 'update' ){
    $.post('url', {status: status});
}

或者，如果要发送每个州：
var statuses = new Array();
$(selector).each(function(key, val){
    statuses[key] = ...
});
$.post('url', {status: statuses});

好的，我已经设法让它运行了，但是使用了不同的技术
这是密码
<!doctype html>
<html>
<head>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            var counter = 0;
            var status = "";
            //initialize the current state
            //initialize the previous state
            var currentState = "off",
             previousState = "on";

            setInterval(function(){
                //console log the counter to see when something is happening
                console.log(counter++);

                //check the current state/class of the selector
                //if it's set to HIGH, then the currentState is on
                if($("div[data-id='selector']").hasClass("HIGH"))
                {
                    currentState = "on";
                }//else the currentState is off
                else
                {
                    currentState = "off";

                }
                //check to see what's the current state and the previous one

                if(currentState == "on" && previousState == "off")
                {
                    previousState = "on";
                    console.log("on");
                }
                else if(currentState == "off" && previousState == "on")
                {
                    previousState = "off";
                    console.log("off");
                } 
            },2000);//set up for 2 seconds just to see faster the result


            //for testing purposes -  change the class from LOW to HIGH  
            $("#on").click(function(){
                $("div[data-id='selector']").removeClass("LOW").addClass("HIGH");
            });

            //for testing purposes -  change the class from HIGH to LOW 
            $("#off").click(function(){
                $("div[data-id='selector']").removeClass("HIGH").addClass("LOW");
            });


        });
    </script>
</head>
<body>

    <button id="on">on</button>
    <button id="off">off</button>

    <div class="LOW" data-id="selector"></div>

</body>


$（函数（）{
var计数器=0；
var status=“”；
//初始化当前状态
//初始化以前的状态
var currentState=“关”，
previousState=“on”；
setInterval（函数（）{
//控制台记录计数器以查看什么时候发生了什么
console.log（counter++）；
//检查选择器的当前状态/类别
//如果设置为高，则当前状态为on
if（$（（“div[data id='selector']））.hasClass（“高”）
{
currentState=“on”；
}//否则当前状态为关闭
其他的
{
currentState=“关闭”；
}
//查看当前状态和上一个状态是什么
如果（当前状态==“开”&&previousState==“关”）
{
previousState=“on”；
控制台。登录（“登录”）；
}
else if（currentState==“off”和&previousState==“on”）
{
previousState=“关闭”；
控制台。注销（“注销”）；
} 
}，2000）；//设置2秒钟，以便更快地看到结果
//出于测试目的-将类从低更改为高
$（“#on”）。单击（函数（）{
$（“div[data id='selector']）。removeClass（“低”）。addClass（“高”）；
});
//出于测试目的-将类从高更改为低
$（“#关闭”）。单击（函数（）{
$（“div[data id='selector']”）.removeClass（“高”）.addClass（“低”）；
});
});
在…上
关

您是否尝试创建一个数组（包含状态和其他一些数据），然后将其传递到一个调用中的服务器？您是否可以更具体地说明“仅当某些内容发生更改时”？它是否必须每五秒钟进行一次Ajax调用？为什么不比较新值和旧值并调用$.post
，如果不同的话？是的@Joseph..这就是我要做的。我试图比较两个值，然后看看它们是否不同。但是它们可能连续20次都不同。我不希望运行$.post相同值的20次。你可能想澄清你的帖子。帖子中没有提到“连续20次不同”。