基于jQuery或Zepto实现实时监控用户浏览信息

对于一些大型公司，想要有一些监控用户行为的分析，怎么办？

比如一个场景，A公司想要监控用户浏览当前屏幕有哪些数据怎么办？

那么就用到本文所提的监控解决方案了：

1.首先要监控用户到底在该屏停留了多久；

2.基于1确定用户是停留在了本页面而没有滑动手机屏幕；

3.在用户未达到条件后的callback机制。

基于以上的问题，我们可以想到时间分片

 1 /* This is a expose advertisements component.
 2  * Base on some class libraries that has dom selector such as jQuery or Zepto.
 3  * The bind dom must be a block element.
 4  * use as $(‘.class‘).exposure(settings);
 5  * The bottom expose proportion use ($(window).height() + $(window).scrollTop() - $(‘.class‘).eq(index).offset().top)/$(‘.class‘).eq(index).height()
 6  * The top expose proportion use (1 - ($(window).scrollTop() - $(‘.class‘).eq(index).offset().top)/$(‘.class‘).eq(index).height())
 7  * settings: object
 8  * {
 9  *      ‘exposeSecond‘: 2 // 2 seconds for advertisement to expose
10  *      ‘timePeriod‘: 100 // 100 Millisecond for every time period
11  *      ‘sendFunction‘: function(){} // callback for each expose time
12  * }
13  */
14 (function($, window){
15     $.fn.exposure= function(settings) {
16         var $this = $(this), el = {}, _winScrollTop = _winScrollTop = $(window).scrollTop(), _winHeight = $(window).height(), watcher = null, sendQueue = [], checkOldTop = checkNewTop = 0, timePeriod = settings.timePeriod || 100, topThis = this, staySecond = settings.exposeSecond || 4, nowTime = 0, sendedQueue = [], turnFlag = true, proportion = 0.8;
17         var stayTime = timePeriod * 10 * staySecond;
18         var _bindElement = function() {
19             el = {
20                 $ads: $this
21             };
22         },
23         _bindAction = function() {
24             $(window).on(‘scroll.ad‘, function(eve){
25                 _winScrollTop = $(window).scrollTop();
26                 _winHeight = $(window).height();
27                 _checkAdSection();
28             });
29         },
30         _checkAdSection = function() {
31             sendQueue = [];
32             turnFlag = true;
33             var _checkNewTop = 0;
34             el.$ads.each(function() {
35                 var $self = $(this);
36                 var _offsetTop = $self.offset().top;
37                 var _eleHeight = $self.height();
38                 if (_offsetTop <= _winScrollTop && _offsetTop + _eleHeight > _winScrollTop && (_offsetTop + _eleHeight * (1 - proportion)) >= _winScrollTop) {
39                     sendQueue.push($self);
40                     _checkNewTop = _checkNewTop ? _checkNewTop : _offsetTop;
41                 }
42
43                 if (_offsetTop > _winScrollTop && _offsetTop <= (_winHeight + _winScrollTop) && (_offsetTop + _eleHeight * proportion) <= (_winHeight + _winScrollTop)) {
44                     _checkNewTop = _checkNewTop ? _checkNewTop : _offsetTop;
45                     sendQueue.push($self);
46                 } else if (_offsetTop > (_winHeight + _winScrollTop)){
47                     return false;
48                 }
49             });
50             checkNewTop = _checkNewTop;
51         },
52         _startWatcher = function() {
53             if (watcher) {
54                 return;
55             }
56
57             watcher = setInterval(function(){
58                 if (!turnFlag) {
59                     return true;
60                 }
61
62                 if (nowTime >= stayTime) {
63                     turnFlag = false;
64                     nowTime = 0;
65                     _sendQueueHandler($.extend({}, sendQueue));
66                     return true;
67                 }
68
69                 if (checkOldTop == checkNewTop) {
70                     nowTime += timePeriod;
71                 } else {
72                     checkOldTop = checkNewTop;
73                     nowTime = 0;
74                 }
75             }, timePeriod);
76         },
77         _sendQueueHandler = function(sendQueueArray) {
78             settings.sendFunction(sendQueueArray);
79         },
80         _init = function() {
81             _bindElement();
82             _bindAction();
83             setTimeout(function() {
84                 _winHeight = $(window).height();
85                 _checkAdSection();
86             }, stayTime);
87
88             _startWatcher();
89         };
90         _init();
91     }
92 })($, window);

$(‘.expose-node‘).exposure({
exposeSecond: 2,//曝光时间2s
sendFunction:function(nodes){//do what you want}//两秒到了回传的notes，自己处理具体要干什么
});