我只需要在纯javascript客户端解决以下定制用例
计算用户在当前用户会话中在网站的特定页面组上花费的总时间。若花费的时间达到一定的时限,则广播事件以通知。
这里的计算是基于maxtime限制和匹配某些页面组的url路径的有条件的。
www..com是网站,如果用户访问以下所有页面
.com/b/
或
.com/x/a.html
或
.com/y/b.html,计算时间
时间是15秒,向所有人广播并重置。
用户可以在同一会话中访问不同的页面,其中某些页面上的时间需要不断添加,而某些页面不计算时间,一旦用户返回到特定页面,则继续计算时间。
所以,试图了解如何捕获页面url条件并在逻辑上使用来计算特定页面组和站点上的时间是spa(软导航)页面和经典页面的混合,以及何时开始和开始计数。
var startTiming=new TimeMeasure([‘www.abc.com/b/*’,”www.ac.com/x/a.html”],15)
这里是我的课堂设计的高级部分,用来解释我想做什么
var TimeMeasure = (function() {
function TimeMeasure(path, maxTimeMS) {
this.start = 0; //can be private
this.end = 0; //can be private
this.duration = 0; //can be private
this.pagePath = path||['*']; //array of string which contains diff regx or url pattern?
this.maxTime = maxTimeMS;
}
TimeMeasure.prototype = (function() {
function startFn() {
//TODO: check if current URL match with location path
this.start = new Date();
}
function updatetimeCalc() {
//TBD how check if current URL match with location path
this.end =new Date();
this.duration += (this.end.getTime() - this.start.getTime());
//save in cookie or storage
window.sessionStorage.setItem("timeongropofpage");
//can this.start=this.end ??
this.notifyIfMaxtimespent();
}
function awayFn() {
updatetimeCalc.call(this);
}
function unloadPage() {
updatetimeCalc.call(this);
}
return {
"init": function() {
this.start = 0;//or new Date()
this.end = 0;
this.duration = window.sessionStorage.getItem("timeongropofpage") || 0;
window.addEventListener('focus', startFn.bind(this));
window.addEventListener('blur', awayFn.bind(this));
window.addEventListener('beforeunload', unloadPage.bind(this));
//should click event also to consider to keep
//document.body.addEventListener('click', updatetimeCalc.bind(this));
//does blur and unload both call when page is unloading?
// on mobile browser befreunload call?
setTimeout(function(){ updatetimeCalc.call(this) }.bind(this), this.maxTime);
},
"reset": function() {
this.start = 0;
this.end = 0;
this.duration = 0;
//reset storage or cookie
},
"notifyIfMaxtimespent": function() {
if (this.duration >= this.maxTime) {
var event = new CustomEvent("userSpentTime", {
detail: {
timeSpent: true
}
});
//broadcast to all
window.dispatchEvent(event);
//rest all
//this.reset()
}
}
};
})();
return TimeMeasure;
}());
暂无答案!
目前还没有任何答案,快来回答吧!