Implement a timer into js function

Question

I have already this function I'm trying to add a timer like this: when value >= 1 and user doesn't move mouse for 1 minute or 60 seconds timer starts and redirect user to a new page but if user moves mouse before 60 seconds end the timer resets again.

function pagar(){
var textarea = document.getElementById ("textarea");
    /*if (event.propertyName.toLowerCase () == "value") {
        alert ("NUEVO VALOR EN EL CAMPO TOTAL: " + event.srcElement.value);
        }*/
if (event.srcElement.value>=1)
{
var bottomMenu = $("#main_footer").bottomMenu([
{name:"backward","class":"red", text:getStr("menu_backward")},
{name:"menu","class":"green", text:getStr("menu_menu"), func:function(){parent.location = "./index.html";}, enabled:false},
{name:"forward","class":"green", text:getStr("menu_pay"), func:forward, enabled:true}
  ]);
  }
     else
{
var bottomMenu = $("#main_footer").bottomMenu([
    {name:"backward","class":"red", text:getStr("menu_backward")},
{name:"menu","class":"green", text:getStr("menu_menu"), func:function()       {parent.location = "./index.html";}, enabled:true},
   {name:"forward","class":"green", text:getStr("menu_pay"), func:forward, enabled:false}
 ]);
  }
     }

I want to add a timer after this:

if (event.srcElement.value>=1)
{

Clint Priest · Accepted Answer · 2011-02-21 14:09:04Z

1

You'll want to attach a mousemove event listener to the window which clears and resets a timer upon movement.

function MouseMoveTimeout() {
   // Whatever you want the timeout to do
}

var TimerID;
function InstallMouseMoveTimeout(Install) {
   var Timeout = 60000;
   var MouseMoveDetector = function(e) {
      clearTimeout(TimerID);
      TimerID = setTimeout(MouseMoveTimeout, Timeout);
   }
   if(Install && TimerID == undefined) {
      TimerID = setTimeout(MouseMoveTimeout, Timeout);
      window.addEventListener('mousemove', MouseMoveDetector, true);
   } else {
      clearTimeout(TimerID);
      window.removeEventListener('mousemove', MouseMoveDetector, true);
      TimerID = undefined;
   }
}

To use this in your code you would:

if (event.srcElement.value>=1) {
  InstallMouseMoveTimeout(true);  // Install mouse move timeout
  ...
} else {
  InstallMouseMoveTimeout(false); // Cancel mouse move timeout
  ...
}

edited Feb 21, 2011 at 14:09

answered Feb 21, 2011 at 13:15

Clint Priest

2101 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bart Over a year ago

I think you forgot to assign to TimerID in the anonymous function. Well, there's probably even more wrong with it... Like you try to remove a different handler function than you installed.

Clint Priest Over a year ago

I modified the answer to include how to implement with your code. @bart Fixed the missing assign, don't see what you're talking about with removing a different handler than I installed.

alexistkd Over a year ago

Message: Object doesn't support this property or method Line: 57 Char: 7

alexistkd Over a year ago

window.addEventListener('mousemove', MouseMoveDetector, true);

ThiefMaster · Accepted Answer · 2011-02-21 13:09:30Z

var idleTimer = null; // do this in the global scope

// do the following at the location where you want to reset the timer:
if(idleTimer) window.clearTimeout(idleTimer);
idleTimer = window.setTimeout(function() {
    location.href = 'other-site';
}, 60000);

So whenever the second block of code is called the old timer is reset and a new one is started. However, since mousemove events trigger very often, this might screw up performance. In this case create an interval (setInterval()) which triggers e.g. every 10 seconds and only set the current date in your mousemove handler. Then you can simply check in your timer callback if enough time since the last mousemove has exceeded and in this case execute an action.

Daniel Earwicker · Accepted Answer · 2011-02-21 13:10:23Z

0

Sounds like a crazy UI idea! But if you want to do that, you need to declare this somewhere:

var timer;

When you want to start the timer running, do this:

timer = setTimeout(function() { timer = -1; doStuff(); }, seconds * 1000);

That will call doStuff after seconds has elapsed.

If you want to cancel the timer:

if (timer != -1) {
  clearTimeout(timer);
  timer = -1;
}

By combining these appropriately, you can solve your problem.

answered Feb 21, 2011 at 13:10

Daniel Earwicker

117k38 gold badges209 silver badges289 bronze badges

1 Comment

bart Over a year ago

Well you clear the timer in onmousemove, and restart it again.

Collectives™ on Stack Overflow

Implement a timer into js function

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related