Shulou(Shulou.com)06/01 Report--

This article mainly introduces the "Vue page monitoring user preview time function how to achieve", in the daily operation, I believe that many people in the Vue page monitoring user preview time function how to achieve the problem, editor access to all kinds of data, sort out a simple and easy-to-use method of operation, hope to answer the "Vue page monitoring user preview time function how to achieve" the doubt is helpful. Next, please follow the editor to study!

Define the start and end timing function

Define in data We define timers through variables so that they can be accessed anywhere through this.timer, so that they can be cleared later when the page is destroyed.

Duration is a time-long counting variable, initialized to 0, and can be used to determine whether the unit is seconds or milliseconds according to the second interval parameter of the timer.

Export default {data () {return {timer: null, duration: 0}}, methods: {startTimer () {this.timer = setInterval (() = > {console.log ("viewing duration:", this.duration) this.duration++}, 1000)} StopTimer () {clearInterval (this.timer) this.updateViewHistory () / / reporting data interface}, updateViewHistory () {/ / reporting interface logic code. }}}

In the startTimer function, we print out the duration variable by the way to verify that the displayed time is correct.

How and where to call

Once we've defined the way to start and end, we start thinking about where to call them. Because the content of the preview page is not unique, it is rendered according to the details of the id of the material. If we write startTimer in the mounted life cycle, we won't be able to properly switch the logic we want when we visit pages of different id.

So I chose to listen to the id parameter in the route to achieve the logic of switching between start and end when previewing different pages.

Watch: {$route: {immediate: true, handler (to, from) {if (to.params.id) this.trainingId = to.params.id this.startTimer ()}

The method to start the timing is called, and finally we can see the output of the current length of time in the log of console

Then and finally, we need to call the stopTimer function when the page is destroyed to clear the timer and report the data.

Since our preview page is a separate tab opened through window.open, here we are listening through the destroyed lifecycle function. If the jump is done by routing, then we need to destroy it when we leave the page before we can listen to it through destroyed.

Mounted () {window.addEventListener ("beforeunload", e = > this.beforeunloadHandler (e))}, destroyed () {window.removeEventListener ("beforeunload", e = > this.beforeunloadHandler (e))}

Call the stopTimer method indirectly through the listener method of window

Methods: {beforeunloadHandler (e) {this.stopTimer ()}}

Someone here will ask why you don't call the stopTimer method directly in destroyed, so that you can separate the unique logic and not mix it with the rest of the logic in destroyed. Improve the readability and maintainability of the code.

At this point, on the "Vue page monitoring user preview time function how to achieve" on the end of the study, I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.