Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • JS Tutorial
  • JS Exercise
  • JS Interview Questions
  • JS Array
  • JS String
  • JS Object
  • JS Operator
  • JS Date
  • JS Error
  • JS Projects
  • JS Set
  • JS Map
  • JS RegExp
  • JS Math
  • JS Number
  • JS Boolean
  • JS Examples
  • JS Free JS Course
  • JS A to Z Guide
  • JS Formatter
Open In App
Next Article:
How to Redirect to Another Page After 5 Seconds using jQuery ?
Next article icon

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

Last Updated : 28 Dec, 2022
Comments
Improve
Suggest changes
Like Article
Like
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:

 

Next Article
How to Redirect to Another Page After 5 Seconds using jQuery ?

P
pritamauddy25
Improve
Article Tags :
  • Technical Scripter
  • JavaScript
  • Web Technologies
  • Technical Scripter 2022
  • JavaScript-Questions

Similar Reads

  • How to Redirect to Another Webpage using JavaScript?
    JavaScript can redirects the users from current page to another webpage (different URL) with and without requiring any manual action (like clicking a link). To redirect to another weboage in JavaScript we need to manipulate the window.location object and it will allow us to navigate programmatically
    2 min read
  • How to redirect to another webpage in HTML?
    It is often required to redirect to another webpage on loading a webpage, for example, due to the contents being moved to the new webpage. Demonstrated here are two simple methods to redirect to another webpage on load. Method-1: Using http-equiv attribute of the meta tag in HTML. Syntax: <meta h
    2 min read
  • How to Redirect to Another Page After 5 Seconds using jQuery ?
    In this article, we will learn, how to redirect to another page or URL after a specified time in jQuery. The built-in function used for performing the action is as follows. The setTimeout(callback, delay) function takes two parameters a callback and a time in milliseconds. When this method is called
    1 min read
  • How to redirect to a relative URL in JavaScript?
    To redirect to a relative URL in JavaScript, you could use window.location.href. It is a property in JavaScript that represents the complete URL of the current page. It can be used to get the current URL or to navigate to a new URL by assigning a new URL to it. Approach HTML Structure:The HTML file
    2 min read
  • How to check if date is less than 1 hour ago using JavaScript ?
    Given a date and the task is to check whether the given date is less than 1 hour ago or not with the help of JavaScript. Approach 1: Count the milliseconds of the difference between the current and prev_date.If those are greater than milliseconds in 1 hour, then it returns false otherwise returns tr
    2 min read
  • How to detect HTTP or HTTPS then force redirect to HTTPS in JavaScript ?
    HTTPS stands for Hypertext Transfer Protocol Secure. As its name implies, it creates a secure, encrypted connection between the user's browser and the server they are trying to access. Since it is an encrypted connection, it prevents malicious hackers from stealing data that is transmitted from the
    3 min read
  • How to check a webpage is loaded inside an iframe or into the browser window using JavaScript?
    An iFrame is a rectangular frame or region in the webpage to load or display another separate webpage or document inside it. So basically, an iFrame is used to display a webpage within a webpage. You can see more about iFrames here : HTML iFrames There may be a variety of reasons for checking whethe
    4 min read
  • How to return true if browser tab page is focused in JavaScript ?
    There may be situations when we need to check if a browser tab is focused or not. The reasons for this include: Prevent sending network requests if the page is not being used by the user as this would reduce the amount of load on the server. Also, this would save upon the cost if we are using a paid
    4 min read
  • How can a page be forced to load another page in JavaScript ?
    In JavaScript, you can force a page to load another page by using the window.location object. There are a few methods to achieve this. To force a page to load another page in JavaScript, we have multiple approaches: Below are the approaches used to force a page to load another page in JavaScript: Ta
    2 min read
  • How to call a function repeatedly every 5 seconds in JavaScript ?
    In JavaScript, the setInterval() method allows you to repeatedly execute a function or evaluate an expression at specified intervals. This method is particularly useful for performing periodic tasks like updating a user interface or making repeated API calls. Syntax: setInterval(function, millisecon
    2 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences