Today, when I was interviewing a candidate remotely, I had a pen question about array de-duplication. I thought it was a basic question and could be done in 1-2 minutes, but it took me 20 minutes and I cut the screen 34 times during the interview.

Of course, I failed the interview. After the interview, ALTHOUGH I was amazed by it, I was also interested in the technical implementation of screen cutting. Therefore, with this article, the author will gradually realize how to monitor screen cutting in video interview.

First, the principle of monitoring switch

Why can I listen to the browser window switch? That’s because the browser comes with the relevant API, that is to use visibilitychange property, MDN introduction:

When the contents of its tabs become visible or hidden, the VisibilityChange event is triggered on the document.

So I just need to register to listen for visibilitychange events:

document.addEventListener("visibilitychange", function() { if(document.visibilityState == 'hidden'){ //todo... } else if (document.visibilityState == 'visible') { //todo... }});Copy the code

The important thing to note here is that the instructions on MDN are not to use window but document:

For compatibility reasons, be sure to use the document. The addEventListener instead of the window. The addEventListener to register the callback. Safari <14.0 only supports the former.

This property has browser compatibility issues:

This property is not supported below IE10

2. Create a project

Prepare two HTML files with the following contents:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, > <title>tab1</title> </head> <body> <h1> document.addEventListener("visibilitychange", function() { console.log(document.visibilityState); If (document.visibilityState == 'hidden'){document.title = 'tab2 '; } else if(document.visibilityState == 'visible') { document.title = 'tab1'; }}); </script> </body> </html>Copy the code

Run it to see what it looks like:

You can already implement twotabThe TAB before the switch. But don’t count your chickens before they hatch!

If there is an extension screen (moving from one screen to another) or there is only one window, but other apps are open, there is no listening, such as when I switch from browser to editor:

Therefore, if only relying on the attribute of Visibilitychange cannot fully realize our needs, what else can we do? Sure, we can listen to see if the current window is in focus! , directly on the code:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, > <title>tab1</title> </head> <body> <h1> document.addEventListener("visibilitychange", function() { console.log(document.visibilityState); If (document.visibilityState == 'hidden'){document.title = 'tab2 '; } else if(document.visibilityState == 'visible') { document.title = 'tab1'; }}); window.onfocus = function () { document.title = 'tab1'; }; Window.onblur = function () {alert(' alert ') {window.onblur = function () {alert(' alert '); '); }; </script> </body> </html>Copy the code

Then take a look at the effect:

Switching from the browser to the editor, in the case of a single window, losing focus can also be heard

Three, leave the timing

As can be seen from the horrible screenshots of 34 times of screen cutting, in addition to counting the number of screen cutting, there is also the time of leaving, which is not difficult, just need to record the time of leaving and re-entering:

let n = 0; let isFirst = true; window.onfocus = function () { if(! {' Please notice, you cut the screen! Total leave ${n} seconds'); isFirst = true; n = 0; } document.title = 'tab1'; }; window.onblur = function () { isFirst = false; setInterval(function() { n++; }}, 1000);Copy the code

Four,

The demo code is not very logical, and there are many areas that can be optimized, such as:

  1. alertPop-box clicking also causes the current window to lose focus
  2. The departure timer can be made dynamically autogenous
  3. The number of times that the screen is not cut can be recorded by caching
  4. In a real world scenario, this would be via real-time communication

There are many more, here is not a list, this article is just to restore the scene of the interview, we will be fun at the same time, the way to learn, play their imagination how to do better.

Finally, don’t cut the screen for the video interview, the interviewer can see it!!