如何在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); 
     }