javascript:网页上的条件计数时间和广播自定义事件

z31licg0  于 2021-09-29  发布在  Java
关注(0)|答案(0)|浏览(241)

我只需要在纯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;
}());

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题