Javascript 跟踪在页面上显示某些元素所花费的时间

假设我们有4个div（3个隐藏，1个可见），用户可以通过javascript/jQuery在它们之间切换

我想计算每个Div花费的时间，并向服务器发送一个包含该时间的xhr，将其存储在数据库中。当用户切换div视图时，将发送此xhr

我该怎么做？如有任何提示，将不胜感激

---

谢谢，

在任何时候，您都可以通过以下方式在变量中记录开始/每圈时间：

var start = new Date();

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

var elapsed = new Date() - start;

这将为您提供以毫秒为单位的运行时间。做额外的数学（除法）来计算秒、分钟等。

给你：

HTML:

现场演示：

---

我将时间保持为毫秒，因为整数更干净、更安全（

0.1+0.2！=0.3

）。请注意，您可以通过设置

delay

变量来调整“精度”（间隔函数的延迟）。

我使用一个非常简单的函数以这种格式提供经过的时间：hh/mm/ss

onclick/onfocus/等

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（）的函数来执行相同的操作

控制台时间（“列表API”）； 设置超时（（）=>{ console.timeEnd（“列表API”）；

---

}，5000）；我根据@Shawn Dotey的答案创建了一个ES6类

check（）

方法不记录消息，但返回经过的时间

在他的示例中不需要方法

start（）

（构造函数已经“启动”了它），所以我用

reset（）

替换了它，这更有意义

导出默认类时间捕获
{
构造函数（）
{
这是reset（）；
}
重置（）
{
this.startTime=new Date（）.getTime（）；
this.lastTime=this.startTime；
this.nowTime=this.startTime；
}
检查（）
{
this.nowTime=new Date（）.getTime（）；
const appeased=this.nowTime-this.lastTime；
this.lastTime=this.nowTime；
返回时间已过；
}
}

在项目中使用它，如下所示：

从“/时间捕获”导入时间捕获；
const timeCapture=新的timeCapture（）；
setTimeout（函数（）{
console.log（timeCapture.check（）+“已过毫秒”）；//~100毫秒已过
timeCapture.reset（）；
setTimeout（函数（）{
console.log（timeCapture.check（）+“已过毫秒”）；//~200毫秒已过
}, 200);
}, 100);

嗨，Sime，我用你的概念证明为fancyBox创造了一些功能。谢谢-

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