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

比如一个场景，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 expose10  *      'timePeriod': 100 // 100 Millisecond for every time period11  *      'sendFunction': function(){} // callback for each expose time12  * }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: $this21             };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，自己处理具体要干什么

});