Javascript 跟踪在页面上显示某些元素所花费的时间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6341774/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Keep track of how much time is spent showing certain elements on the page
提问by wael34218
So lets say we have 4 Divs (3 hidden, 1 visible), the user is able to toggle between them through javascript/jQuery.
假设我们有 4 个 Div（3 个隐藏，1 个可见），用户可以通过 javascript/jQuery 在它们之间切换。
I want to calculate time spent on each Div, and send an xhr containing that time to server to store it in the database. This xhr will be sent when the user toggle the div view.
我想计算在每个 Div 上花费的时间，并将包含该时间的 xhr 发送到服务器以将其存储在数据库中。当用户切换 div 视图时，将发送此 xhr。
How can I do that? Any hints will be greatly appreciated.
我怎样才能做到这一点？任何提示将不胜感激。
Thanks,
谢谢，
回答by Ates Goral
At any point, you can record a a start/lap time in a variable with:
在任何时候，您都可以在变量中记录开始/单圈时间：
var start = new Date();
When you want to calculate the elapsed time, simply subtract the stored date from a new Date instance:
当您想计算经过的时间时，只需从新的 Date 实例中减去存储的日期：
var elapsed = new Date() - start;
This will give you the elapsed time in milliseconds. Do additional math (division) to calculate seconds, minutes, etc.
这将为您提供以毫秒为单位的经过时间。做额外的数学（除法）来计算秒、分钟等。
回答by ?ime Vidas
Here you go:
干得好：
HTML:
HTML：
<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);
Live demo:http://jsfiddle.net/7svZr/2/
现场演示：http : //jsfiddle.net/7svZr/2/
I keep the times in milliseconds because integers are cleaner and safer (0.1 + 0.2 != 0.3). Note that you can adjust the "precision" (the delay of the interval function) by setting the delayvariable.
我将时间以毫秒为单位，因为整数更干净、更安全 ( 0.1 + 0.2 != 0.3)。请注意，您可以通过设置delay变量来调整“精度”（区间函数的延迟）。
回答by Simone
I use a really easy function to provide time elapsed in this format: hh/mm/ss
我使用一个非常简单的函数来提供这种格式的时间：hh/mm/ss
onclick/onfocus/etc..
onclick/onfocus/等等..
var start_time = new Date();
on leaving:
离开时：
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;
}
回答by Shawn Dotey
Here is a reusable class, example is included in code:
这是一个可重用的类，示例包含在代码中：
/*
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
回答by Naga Srinu Kapusetti
Javascript console internally has a function called "console.time() and console.timeEnd() to do the same. Simple you can use them
Javascript 控制台内部有一个名为“console.time() 和 console.timeEnd() 的函数来做同样的事情。简单你可以使用它们
console.time("List API");
setTimeout(()=> {
console.timeEnd("List API");
},5000);More details can be found here https://developer.mozilla.org/en-US/docs/Web/API/Console/time
可以在此处找到更多详细信息 https://developer.mozilla.org/en-US/docs/Web/API/Console/time
