Question

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

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

我该怎么做？任何提示将不胜感激。

谢谢，

Answer 1

在任何时候，您都可以在变量中记录开始/单圈时间：

var start = new Date();

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

var elapsed = new Date() - start;

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

Answer 2

你走了：

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, 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）。请注意，您可以通过设置delay变量来调整“精度”（间隔函数的延迟）。

Answer 3

我使用一个非常简单的功能来提供这种格式的时间：hh / mm / ss

的onclick /聚焦状态/等。

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;
}

Answer 4

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

/*
     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

Answer 5

Javascript控制台内部具有一个名为“ console.time（）和console.timeEnd（）的功能。您可以轻松使用它们

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

更多详细信息可以在这里找到 https://developer.mozilla.org/en-US/docs/Web/API/Console/time

Answer 6

我根据@Shawn Dotey的答案创建了一个ES6类。

check()方法不会记录消息，但会返回经过的时间。

在他的示例中不需要方法start()（构造函数已经“启动”了它）。因此，我用reset()代替了它。

export default class TimeCapture
{
    constructor()
    {
        this.reset();
    }

    reset()
    {
        this.startTime = new Date().getTime();
        this.lastTime = this.startTime;
        this.nowTime = this.startTime;
    }

    check()
    {
        this.nowTime = new Date().getTime();
        const elapsed = this.nowTime - this.lastTime;
        this.lastTime = this.nowTime;

        return elapsed;
    }
}

像这样在您的项目中使用它：

import TimeCapture from './time-capture';

const timeCapture = new TimeCapture();

setTimeout(function() {
    console.log( timeCapture.check() + " ms have elapsed" ); //~100 ms have elapsed
    timeCapture.reset();
    setTimeout(function() {
        console.log( timeCapture.check() + " ms have elapsed" ); //~200 ms have elapsed
    }, 200);
}, 100);

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

6 个答案: