首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >记录在页面上显示某些元素所花费的时间

记录在页面上显示某些元素所花费的时间
EN

Stack Overflow用户
提问于 2011-06-14 17:48:18
回答 6查看 25.3K关注 0票数 18

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

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

我该怎么做呢?任何提示都将不胜感激。

谢谢,

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2011-06-14 17:51:38

在任何时候,您都可以使用以下命令在变量中记录起跑/单圈时间:

代码语言:javascript
复制
var start = new Date();

当您想要计算运行时间时,只需从新的date实例中减去存储的日期:

代码语言:javascript
复制
var elapsed = new Date() - start;

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

票数 33
EN

Stack Overflow用户

发布于 2011-06-14 18:45:18

这就是了:

HTML:

代码语言:javascript
复制
<div id="divs">
    <div>First</div>
    <div class="selected">Second</div>
    <div>Third</div>
    <div>Fourth</div>
</div>

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

JavaScript:

代码语言: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变量来调整“精度”(间隔函数的延迟)。

票数 7
EN

Stack Overflow用户

发布于 2016-01-13 04:18:26

下面是一个可重用的类,示例包含在代码中:

代码语言:javascript
复制
/*
     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
票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/6341774

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档