跟踪花费了多少时间在页面上显示某些元素

问题描述

| 假设我们有4个Divs（3个隐藏，1个可见），用户可以通过javascript / jQuery在它们之间进行切换。 我想计算在每个Div上花费的时间，并将包含该时间的xhr发送到服务器以将其存储在数据库中。当用户切换div视图时，将发送此xhr。 我怎样才能做到这一点？任何提示将不胜感激。 谢谢，     

解决方法

        您随时可以在变量中记录开始/单圈时间，方法是：

var start = new Date();

要计算经过时间时，只需从新的Date实例中减去存储的日期：

var elapsed = new Date() - start;

这将为您提供经过的时间（以毫秒为单位）。进行额外的数学运算（除法）以计算秒，分钟等。     ,        干得好： HTML：

<div id=\"divs\">
    <div>First</div>
    <div class=\"selected\">Second</div>
    <div>Third</div>
    <div>Fourth</div>
</div>

<p id=\"output\"></p>

JavaScript：

var divs = $(\'#divs > div\'),output = $(\'#output\'),tarr = [0,0],delay = 100;

divs.click(function() {
    $(this).addClass(\'selected\').siblings().removeClass(\'selected\');
});

setInterval(function() {
    var idx = divs.filter(\'.selected\').index();
    tarr[idx] = tarr[idx] + delay;
    output.text(\'Times (in ms): \' + tarr);
},delay);

现场演示：http://jsfiddle.net/7svZr/2/ 我将时间保持为毫秒，因为整数更干净更安全（

0.1 + 0.2 != 0.3

）。注意，可以通过设置“ 5”变量来调整“精度”（间隔功能的延迟）。     ,        我使用一个非常简单的函数来提供以下格式的时间：hh / mm / ss onclick / onfocus / etc.。

var start_time = new Date();

离开时：

var end_time = new Date();

var elapsed_ms = end_time - start_time;
var seconds = Math.round(elapsed_ms / 1000);
var minutes = Math.round(seconds / 60);
var hours = Math.round(minutes / 60);

var sec = TrimSecondsMinutes(seconds);
var min = TrimSecondsMinutes(minutes);

function TrimSecondsMinutes(elapsed) {
    if (elapsed >= 60)
        return TrimSecondsMinutes(elapsed - 60);
    return elapsed;
}

    ,        这是一个可重用的类，示例包含在代码中：

/*
     Help track time lapse - tells you the time difference between each \"check()\" and since the \"start()\"

 */
var TimeCapture = function () {
    var start = new Date().getTime();
    var last = start;
    var now = start;
    this.start = function () {
        start = new Date().getTime();
    };
    this.check = function (message) {
        now = (new Date().getTime());
        console.log(message,\'START:\',now - start,\'LAST:\',now - last);
        last = now;
    };
};

//Example:
var time = new TimeCapture();
//begin tracking time
time.start();
//...do stuff
time.check(\'say something here\')//look at your console for output
//..do more stuff
time.check(\'say something else\')//look at your console for output
//..do more stuff
time.check(\'say something else one more time\')//look at your console for output

    ,        Javascript控制台内部具有一个名为\“ console.time（）和console.timeEnd（）的函数，以实现相同的功能。您可以简单地使用它们

console.time(\"List API\");
setTimeout(()=> {
  console.timeEnd(\"List API\");
},5000);