Confirm() method with return keyword

Using the setTimeout() method
Shut Timer Off
The setTimeout method provides a way to tell the JavaScript engine to evaluate an expression after a set amount of time. That expression can be a simple statement, a call to another function, or even a call to the function containing the method itself.

The method takes 2 parameters: the first is the code to be executed, the second is how long to wait before executing that code. The first parameter must be stored as a string. The second is stored in terms of milliseconds, where 1,000 milliseconds equals one second.

In this example, using the setTimeout() method as a timer, a confirmation box is generated after a set amount of time asking the user if they wish to log out. The function containing the timer code is called when the page loads using the onLoad event handler within the HTML body tag. This causes the function to run on its own, without user invocation.

<body onload="ask()">

function ask(){
setTimeout("confirmBox()",3000)   //call confirmBox function after 3 seconds
}

function confirmBox(){
var logout = confirm("You've been idle for 3 seconds. \nWould you like to go to the home page?")

   if (logout==true) { //if user pressed OK
   location.href="../default.php"  //take them to another page
   }
   else { //if user pressed Cancel
   ask() // call ask function, restarting the timer
   }
}

By using simple if/else statements, the script will take the user to the home page if the returned value is true (meaning the user pressed OK), and calls the ask() function which restarts the timer if the returned value is false (user pressed Cancel).

Since the variable "logout" represents the returned value of a confirmation box, which will a value of true or false, the if statement's condition could also look like this: if(logout). Or if the if statment tested for a false value instead, it could look like this: if(!logout) or if(logout == false).

This kind of script is useful when the security of a page is an issue. If the secure page has been idle for awhile, a gentle reminder is given to the user that they should either continue or go to a different page, usually meaning they log out.

In a real scenario, the confirmation would probably offer options of going to 2 different pages altogether, rather than giving the option of remaining on this page. In that case, even if a user walked away while logged in, the secure page is protected because while the confirm box is present, all user interaction on the page is impossible. Then regardless of which option any other user chose, they would be taken to another page.

clearTimeout()
To cancel a timed action that is waiting to run via setTimeout(), JavaScript has provided the clearTimeout() method. Since the setTimeout method returns a value (a browser-assigned integer that represents the ID of the timeout process), a variable name assigned to it is used as the clearTimeout method's parameter. When the clearTimeout method is being called from outside the function, the variable name must have a global scope (declared outside a function body).

var timer

function ask(){
timer = setTimeout("confirmBox()",3000)
}

<a href="javascript:void(0)" onclick="clearTimeout(timer)">Shut Timer Off</a>

Because the setTimeout's expression is stored as a string, a common problem new scripters have with the setTimeout method occurs when a function invoked by the method requires an argument. The simple solution is concatenation. For instance, if I have a setTimeout at the end of a function that invokes that same function, and it requires an argument, the concatenation would look like this:

function theName(id){
...statements...
setTimeout("theName('" + id + "')",1000)
}

If in the original invokation of the function the argument is passed as a string, it must also be passed as a string by the setTimeout method. In that case, don't forget to include the properly nested quotes around the argument. See the Moving Layers and Clipping Layers examples using this technique.

View the Source