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

当选项卡聚焦时，您可以执行您的功能，当选项卡处于非活动状态时，它会删除间隔并停止执行您的功能。

Answer 2

HTML5 Page Visibility API旨在解决这个问题，现在几乎无处不在。

花在页面的一部分上的时间

2 个答案: