如何在javascript中存儲變量以限制http調用的數量？

Question

我正在使用返回進度事件的第二方文件下載程序。我可以捕獲事件並調用服務器上的程序來執行更新（爲了安全起見，我可以告訴最近的活動）。

我每秒獲得大約30個事件，所有百分比下載1％，然後30％更多2％，然後30％更多3％等。我想限制我的http呼叫每個百分比更改1次％，2％，3％等。我會在頁面上放置一個隱藏字段並對其進行比較並進行更新，但自從下載進行後，我無法刷新頁面。

有沒有在JavaScript或jQuery中使用某種類型的客戶端存儲的方法呢？

換句話說，我需要能夠告訴當從1 PercentCurrent值更改爲2等

我的JavaScript函數如下所示：

  function onProgress(PercentTotal, PercentCurrent, Index){ 
      var xmlhttp; 

      //The handler will update the file progress 
      if (typeof XMLHttpRequest != 'undefined') { 
       xmlhttp = new XMLHttpRequest(); 
      } 
      if (!xmlhttp) { 
       throw "Browser doesn't support XMLHttpRequest."; 
      } 
      var data = ""; 
      xmlhttp.open("POST", "UpdateProgress.aspx?PercentCurrent=" + PercentCurrent, true); 
      //Send the proper header information along with the request 
      xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
      //xmlhttp.setRequestHeader("Content-length", data.length); 
      xmlhttp.setRequestHeader("Connection", "close"); 
      xmlhttp.send(data); 
     } 

謝謝你，吉姆

Answer 1

的JavaScript確實有變量，你只需要存儲一個在範圍這是您onProgress代碼訪問。你可能只是能夠在同一個地方onProgress聲明使用var，但一個簡單的和JavaScripty方法，使變量「私有」是使用封閉：

var onProgress = (function(){ 
    var lastSend = 0; 

    return function(PercentTotal, PercentCurrent, Index){ 
     if (Math.floor(PercentCurrent) > lastSend) { 
      lastSend = PercentCurrent; 
      var xmlhttp… 
     } 
    } 
})(); 

這會顯得有點混亂如果你還沒有使用JavaScript的話。這裏是發生了什麼：

1. 我創建了一個名爲onProgress
2. 我創建並立即運行一個匿名（未命名）函數，這樣的變量：(function(){ … })()
3. 這個函數定義了一個局部變量，lastSend，並返回真正的onProgress功能。

無論何時在JavaScript中調用函數，它都可以訪問它創建的範圍。所以，無論何時調用onProgress()，它都可以訪問lastSend變量，並且可以檢查進度是否已經移過下一個百分比。

當然，這有點難看，它只能在頁面上使用一次（因爲只有一個閉包和一個lastSend變量，而不是將它分配給一個名稱，您可以直接將它傳遞給函數它會匿名地調用它（見下文），然後，當您點擊downloadFile時，會創建一個帶有新閉包的新函數副本。

---

您原來的問題被標記爲jquery。如果你確實在頁面上使用jQuery，您可以顯著簡化數據的發佈（向下一行），並使其更加兼容，與jQuery.post：

$.post("UpdateProgress.aspx", { PercentCurrent: PercentCurrent }); 

（這將替換所有XMLHttpRequest對象相關的代碼在onProgress）

---

所以，使用封閉和jQuery.post可能是這樣的：

// Not sure what your second-party file downloader looks like 
fileDownloader.downloadFile((function(){ 
    var lastSend = 0; 
    return function(PercentTotal, PercentCurrent, Index){ 
     if (Math.floor(PercentCurrent) > lastSend) { 
      lastSend = PercentCurrent; 
      $.post("UpdateProgress.aspx", { PercentCurrent: PercentCurrent }); 
     } 
    } 
})()); 

Answer 2

看看jQuery's .data()。它允許你存儲數據並將其連接到一個特定的DOM元素，像這樣：

$('body').data('foo', 52); 
$('body').data('foo'); // 52 

Answer 3

我不知道理解你的問題。頁面是否連續重新加載？如果不是所有你需要做的是：

var lastPercent = null; // you need to initialize this when it all starts again. 
function onProgress(PercentTotal, PercentCurrent, Index){ 
      var xmlhttp; 

if (lastPercent == PercentCurrent) 
return; //Does nothing if no change occurred. 

lastPercent = PercentCurrent; 

      //The handler will update the file progress 
      if (typeof XMLHttpRequest != 'undefined') { 
       xmlhttp = new XMLHttpRequest(); 
      } 
      if (!xmlhttp) { 
       throw "Browser doesn't support XMLHttpRequest."; 
      } 
      var data = ""; 
      xmlhttp.open("POST", "UpdateProgress.aspx?PercentCurrent=" + PercentCurrent, true); 
      //Send the proper header information along with the request 
      xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
      //xmlhttp.setRequestHeader("Content-length", data.length); 
      xmlhttp.setRequestHeader("Connection", "close"); 
      xmlhttp.send(data); 
     }