javascript - JS onunload 事件并不总是有效

Question

我想计算访问者在某个页面上花费了多少时间并将其存储在我的 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();
}

问题是它并不总是有效。我会说它的效果就像我尝试它的 10 次中的 3 次。难道是没有足够的时间让PHP和SQL执行完？

Answer 1

由于 onunload 不可靠，我会考虑 AJAX 解决方案。我根本不是这方面的专家，但想到的想法是时不时地向您的柜台发出 ping 信号。我不会每秒都对您的计数器执行 ping 操作，因为这看起来太过分了。

我会将时间分解为您关心的持续时间，例如 <5 秒、<30 秒、<1 分钟、<5 分钟、5 分钟以上。

然后我会像这样写一段 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

有道理吗？