Open In App

How to Redirects to Another WebPage if User Idle for 10 Seconds in JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will create a webpage that redirects to another page if the user is idle for more than one minute. We will use JavaScript to redirect the web page to another web page if the user is ideal for 10 seconds.

Approach: To make this, we will use setTimeout() and clearTimeout() methods. The setTimeout() method is used to start the countdown for the ideal time and loads to another webpage when the countdown reaches 10 seconds. But if any of the events like clicking the mouse, moving the mouse, or an element is touched by the user (which is observed by the addEventListener function), the clearTimeout() method is called to stop the execution of the setTimeout after which the setTimeout() method restarts its countdown of idle activity from 0 seconds. At the end of 10 seconds, the webpage automatically redirects to the GFG home page. 

Syntax:

const resetIdleTimeout = function () {

    if (idleTimeout) 
        clearTimeout(idleTimeout);

    idleTimeout = setTimeout(
        () => location.href = redirectUrl, idleDurationSecs * 1000);
};

resetIdleTimeout();

['click', 'touchstart', 'mousemove'].forEach(
    evt => document.addEventListener(evt, resetIdleTimeout, false)
);

Example: In this example, the web page redirects to another web page if the user idle for 10 Seconds in JavaScript

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to Redirects to Another WebPage 
        if User Idle for 10 Seconds in 
        JavaScript ?
    </title>
</head>
  
<body>
    <h style="color:green;">
        Welcome To GFG
    </h>
      
    <p>Wait Idle For 10 Seconds To See Magic.</p>
      
    <script>
        (function () {
  
            // Ideal time in seconds
            const idleDurationSecs = 10;
  
            // Redirect idle users to this URL
            const redirectUrl = 
                'https://www.geeksforgeeks.org/';
              
            // Variable to hold the timeout
            let idleTimeout; 
  
            const resetIdleTimeout = function () {
  
                // Clears the existing timeout
                if (idleTimeout) 
                    clearTimeout(idleTimeout);
  
                // Set a new idle timeout to load the
                // redirectUrl after idleDurationSecs
                idleTimeout = setTimeout(() => location.href 
                    = redirectUrl, idleDurationSecs * 1000);
            };
  
            // Init on page load
            resetIdleTimeout();
  
            // Reset the idle timeout on any of
            // the events listed below
            ['click', 'touchstart', 'mousemove']
                .forEach(evt => document.addEventListener(
                    evt, resetIdleTimeout, false)
            );
        })();
    </script>
</body>
  
</html>


Output:

 



Last Updated : 28 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads