在页面的某个部分花费的时间

Question

我有一个包含多个部分的页面。我正在使用以下导航菜单 jsfiddle 我想计算用户阅读页面的一部分所花费的时间。这个想法是在激活的部分发生变化时触发一个事件并设置一个计时器，如果计时器大于 5 秒（例如）用户正在阅读一个部分然后我发送一个 ajax 请求以节省时间花费阅读给定部分。

 TrackUserReading(function () { 
                    var sectionName = $("nav ul#sidebar.nav li.active a").html();
                    url = '/Main/TrackUserReading';
                    data = { sectionName: sectionName, time : Timer };
                    var dataType = "json";
                    if(sectionName)
                         $.post(url, data, $.proxy(function (data, textStatus, jqXHR) {
                    }, this), dataType);

但是如果用户停留在同一部分并打开一个新选项卡怎么办，在这种情况下计时器不正确。

我的问题是准确计算用户花费时间的最佳方法是什么。提前致谢。

Answer 1

在 chrome 和 firefox 中，setTimeout 设置为触发 once every second while the tab is inactive

要检查选项卡是否处于活动状态，我借用了 here 的答案：

var interval_id;
$(window).focus(function() {
    if (!interval_id)
        interval_id = setInterval(trackUserReading, 1000);
});

$(window).blur(function() {
    clearInterval(interval_id);
    interval_id = 0;
});

When the tab is focused you can execute your function, when the tab is inactive it removes the interval and stops executing your function.

Answer 2

HTML5 Page Visibility API 旨在解决这个问题，现在几乎所有地方都支持它。

在页面的某个部分花费的时间

Time spent in a part of a page

javascript

jquery

google-analytics