Question

我有一个由单个页面组成的简单网站。 Piwik正在跟踪使用行为。由于页面的设计，用户通常使用滚动浏览而不是使用导航栏并单击链接，使链接跟踪成为一种非常无法提供信息的方法，以便深入了解网站的使用方式。为了跟踪用户行为，我有一个js函数使用＆＃34;滚动＆＃34;确定用户在页面上的位置，然后向跟踪服务器发送请求：

setInterval(reportposition, 1000); 
 function reportposition () {
    $(function () {
             var $win = $(window);

             $win.scroll(function () {
                 if ($win.scrollTop() == 0) {
                     _paq.push(['trackEvent', 'Scroll', 'PageTop']);
}               else if (($(document).height() - $win.scrollTop()
                                < 7540) && ($(document).height() - $win.scrollTop() > 7500 )) {
                     _paq.push(['trackEvent', 'Scroll', 'About']);
}
                 else if ($win.height() + $win.scrollTop()
                                == $(document).height()) {
                     _paq.push(['trackEvent', 'Scroll', 'PageBottom']);
                 }
             });
         });
};

但是，满足其中一个条件的每个滚动都会进行数十次，因此会向服务器发送数十个跟踪请求。我尝试使用setInterval降低函数运行的频率，但效果可以忽略不计。是否有任何方法可以在满足条件直到满足不同条件时才启动该功能一次？

使用滚动来检查用户的位置似乎对CPU周期要求相当高，因为有时可以通过简单的滚动来发生数百个事件。有没有办法用尽可能少的CPU使用来解决这个问题？

Answer 1

这里的解决方案是检查scrollTop是否等于用户滚动的当前div的scrollTop。

就CPU而言，请查看https://techoctave.com/c7/posts/60-simple-long-polling-example-with-javascript-and-jquery。这是一个解决方案;理想情况下，您应该考虑使用Websockets（即使用带有node.js的socket.io）。

Answer 2

在您的情况下，

滚动事件是不必要的，因为它仅对检测用户是否已滚动有用，而您可以通过仅与一秒前的scrollTop（）值进行比较来检查。如果不是

，您也不需要访问高度值

setInterval(reportposition, 1000); 
var $win = $(window);

function reportposition () {
    $(function () {
        if(scrollTop == $win.scrollTop()){
            //same position
        }
        scrollTop = $win.scrollTop();
        winHeight = $win.height();
        docHeight = $(document).height();
        if (scrollTop == 0) {
             _paq.push(['trackEvent', 'Scroll', 'PageTop']);
        }else if ((docHeight - scrollTop < 7540) 
            && (docHeight - scrollTop > 7500 )) {
             _paq.push(['trackEvent', 'Scroll', 'About']);
        }else if (winHeight + scrollTop
                        == docHeight) {
             _paq.push(['trackEvent', 'Scroll', 'PageBottom']);
         }
    });
};

另外，在滚动事件中，您可以检查已经过了多少时间并决定是否处理。

Javascript scroll：如何以最少的CPU使用量执行一次函数？

2 个答案: