當有東西發生變化時，在線運行JavaScript/Jquery腳本

-1

我試圖只在頁面上發生某些變化時才運行$ .post（）腳本。如果發生同樣的事情，那麼腳本應該只運行一次。如果有變化，那麼腳本應該運行一次 - 不要重複。該腳本放置在每5秒運行一次的setInterval函數中。當有東西發生變化時，在線運行JavaScript/Jquery腳本

這是我到目前爲止的一個例子。

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

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

在這種情況下，$。員額腳本將運行每5秒。甚至如果狀態==「脫機」連續20次。即使如果狀態==「在線」連續20次。

關於如何運行$ .post（）腳本只有一次而不是20次的任何想法？我正在考慮一些if/else陳述..但我迷失了細節...

來源

2015-08-31 Selyst

您是否嘗試創建一個數組（它將具有狀態和其他數據），然後傳遞給將在一次調用中的服務器 –

您是否可以更具體地說明「僅當發生了某些變化」？無論如何，它是否必須每五秒進行一次Ajax調用？ –

爲什麼不比較新值和舊值，如果不同，請調用'$ .post'？ – Joseph

如果我得到你的問題是正確的，你只需要記住之前的值，並檢查是否一個現在不同了：

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

說明：

您保存所有的oldStates，這樣你就知道每個用戶，如果他已經脫機或聯機被你檢查了所有的狀態也是最後一次。如果他的state已更改，則可以將他保存在differences陣列中。如果至少有一個用戶更改了其state（if(differences.length){），則將數據發送到服務器。

來源

2015-08-31 14:08:11

做這樣的：

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});

來源

2015-08-31 14:09:21 Richard

行..所以我設法得到它運行..但使用不同的技術..

這是代碼..

<!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>

來源

2015-08-31 15:04:23 Selyst

當有東西發生變化時，在線運行JavaScript/Jquery腳本

回答

相關問題