JS onunload 事件并不总是有效

我想计算访问者在某个页面上花费的时间并将其存储在我的 MySQL 数据库中。

我想在 window.onload 上启动一个计时器，如下所示：

window.onload= startCount;
window.onunload= sendCount;

var b=0;
var y;
function startCount() {
    document.getElementById('livecount').innerHTML=b;
    b=b+1;
    y=setTimeout("startCount()",1000);
}

在访问者离开页面 (window.onunload) 后，我通过 XMLHttpRequest 将时间发送到 PHP 文件，该文件会将其存储在我的数据库中：

function sendCount() {
    clearTimeout(y);    
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }  
xmlhttp.open("GET","count.php?q="+b,true);
xmlhttp.send();
}

问题是它并不总是有效。我想说，我尝试的十次中有三次是有效的。 难道是PHP和SQL没有足够的时间来完全执行？

由于 onunload 不可靠，我会考虑 AJAX 解决方案。我根本不是这方面的专家，但我脑海中浮现的想法是时不时地对你的柜台进行一次ping。我不会每秒都对你的柜台进行 ping 操作，因为这似乎太过分了。

我会将时间分解为您关心的持续时间，例如

然后我会写一段 JavaScript，如下所示：

window.onload = soCounter;

var iter=0;
var times=[0,5,30,60,300];  // Your duration choices

function doCounter() {

    sendCountPing(times(iter));

    iter++;

    if(iter < times.length) {
        setTimeout(doCounter, times[iter]*1000);
    }
} 

function sendCountPing(dur) {
    if (window.XMLHttpRequest)
    {  // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {  // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }  

    xmlhttp.open("GET","count.php?q="+b,true);
    xmlhttp.send();

}

诀窍是对于每个count.php?q=30发送后，您需要从count.php?q=5数数。这不必是编程的，它很容易进行后处理。

澄清一下，如果您有 3 位访客，其中一位花费了 3 秒，一位花费了 20 秒，一位花费了 30 分钟，您将看到以下计数：

  0:  3   // 3 people spent at least 0 seconds
  5:  2   // 2 people spent at least 5 seconds
 30:  1
 60:  1
300:  1   // 1 person spent at least 5 minutes

合理？