Develop Reference

Reset timer on mousemove and keypress

The below javascript code auto refresh the page every 10 sec.
My question is how can I reset the timer on mousemove and keypress.
Java-Script
<script type="text/javascript" language="JavaScript">
var secs;
var timerID = null;
var timerRunning = false;
var delay = 1000;
function InitializeTimer(seconds) {
//length of the timer, in seconds
secs = seconds;
StopTheClock();
StartTheTimer();
}
function StopTheClock() {
if (timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function StartTheTimer() {
if (secs == 0) {
StopTheClock();
window.location.href = window.location.href;
}
else {
document.getElementById("lbltime").innerText = secs + " ";
secs = secs - 1;
timerRunning = true;
timerID = self.setTimeout("StartTheTimer()", delay);
}
}
</script>
Thank you in advance.

If I understood you correctly, something like this (really basic example: the timer is reset on mousemove and keypress):
var elem = document.getElementById("timer"), timeout, startTimer = function timer() {
elem.textContent++;
timeout = setTimeout(timer, 1000)
}
function resetTimer() {
// here you reset the timer...
clearTimeout(timeout);
elem.textContent = -1;
startTimer();
//... and also you could start again some other action
}
document.addEventListener("mousemove", resetTimer);
document.addEventListener("keypress", resetTimer);
startTimer();
<span id="timer">-1</span> - Move cursor or press a key to reset timer.
As I guess, you want to delay page reloading if there was some user activity on the page. In your reload() function you just need to check, if timer's value reached the limit (like 60 seconds). If yes, execute reloading. However, notice, that handling mousemove event can make browser's tab have high CPU usage, if, for example, I just start to move my cursor quickly. You might want to pick some important areas and set handlers on the corresponding elements. For example, keypress event can be listened to only on a comment form or mousemove can be listened to only on a menu or on an article.
PS. Also take into account that
The keypress event is fired when a key is pressed down, and that key normally produces a character value
so, if user presses, for example, ctrl or alt the event will not be fired.

Your code seems a bit too branched out in my opinion, what I would do is simplify it a bit.
window.refreshTimeout = null;
function refreshPage(){
location.reload();
}
function refresh(){
clearTimeout(window.refreshTiemout);
window.refreshTimeout = setTimeout(refreshPage, 2000)
}
window.refreshTimeout = setTimeout(refreshPage, 2000)
window.addEventListener('mousemove', refresh)
<h4>HelloWorld</h4>
As you can see, you attach an event listener to the window for a mouse move (you can attach others too) within which you cancel the previous timeout and start a new one. Initially you of course start a timeout.

Only setTimeout executes function. JS

I am trying to implement kind of player on my website.
If press 'Play' button, the music starts and the page smoothly scrolls down.
But when you press 'Mute' button (function(){music.volume=0}) I am not sure why the page appears at the top again. window.scroll() doesn't do anything without delay. So i am using setTimeout function to scroll the page on the current place. The problem is that in Opera and IE setTimeout takes about 10 ms, so when i click 'Mute' button i see like ticks to top and back. In chrome it takes only 2 ms and there is no problems.
Now when i decide to create my own timeout function the window.scroll() does not work again.
Here is my code:
var isMuted = false;
muteButton.onclick = function() { ////This function works with big delay.
if (!isMuted) {
mainAudio.volume = 0;
isMuted = true;
} else {
mainAudio.volume = bgAudioTrackVolume;
isMuted = false;
}
setTimeout(function() {
window.scroll(0, offset); /// Works
}, 0)
};
Change setTimeout with:
i = 9542155.873; /// I have tried delay time from 1ms - 250ms by changing this value.
while (i > 0.00001) {
i = i / 1.0001234567;
if (i < 0.00001) {
window.scroll(0, offset); /// Does not do anything. Strange! Have tried to change variable with a number.
}
}
Every time i check offset value, it is always available before calling scroll function.
I know that my problem is not usual and i am realy need your help.

The reason that the page scrolls to the top is that you are using a link with the empty bookmark #, which represents the top of the page. The reason that the scroll method doesn't work without a timeout is that jumping to the bookmark happens after the event handler.
Instead of trying to scroll the page back to where it was, just stop the default action of the link by returning false from the event handler:
var isMuted = false;
muteButton.onclick = function() {
if (!isMuted) {
mainAudio.volume = 0;
isMuted = true;
} else {
mainAudio.volume = bgAudioTrackVolume;
isMuted = false;
}
return false;
};
Alternatively, use some other element than a link.

jQuery/JavaScript: My recursive setTimeout function speeds up when tab becomes inactive

I've got an odd little dilemma in this jQuery slideshow plugin that I am building.
It's nothing fancy and the code I have written to date is working great however I have noticed that when I leave the site running and switch to a new tab and continue browsing the web in this other tab (Chrome for Mac in my case) that when I return to my site, the setTimeout call seems to have speed up and instead of waiting for the timer to finish the fire the event, it fires continuously.
Here is my (simplified) code:
var timer;
var counter;
var slides; // collection of all targeted slides.
// animate to the next slide
function nextSlide() {
// stop timer
methods.stopTimer();
// increase counter
counter++;
if ( counter > slides.length-1 ) { counter = 0; } // if counter is greater than the amount of slides, back to the start.
// inner = container to be animated
// in the complete callback restart the timer.
inner.animate({
'left': '-'+slides.eq( counter ).position().left
}, {
duration : settings.animationSpeed,
easing : 'easeInOutExpo',
complete : startTimer()
});
}
// timer functions.
function startTimer() {
if ( timer === '' ) {
timer = setTimeout( function() {
nextSlide();
} , 3000 );
}
}
function stopTimer() {
clearTimeout( timer );
timer = '';
}
So what should happen is that at the end of the animation, the timer gets reattached with another setTimeout call so that it becomes a continuous slideshow (and this works just fine until you leave the tab.
Once you leave the tab and return to the tab with slideshow it seems that the 3000 ms timer has been reduced to invoke instantly and now the moment the animation finishes the next one starts with no delay at all.
Any ideas on why this is happening on how it can be solved would be much appreciated.
Thanks for reading,
Jannis

Some browsers (like Chrome) drastically slow down recurring timers when the tab goes inactive and then, when the tab comes active again, they try to "catch up" so that the same number of actual timer events has occurred. All I can think of as a work-around is for you to stop the slideshow entirely when the tab goes inactive and start it again when it comes active.

Instead of timeouts have you tried intervals? Also for it to be recursive, just call the nextSlide() function as its own callback:
var counter = 1;
// animate to the next slide
function nextSlide() {
// increase counter
counter++;
// if counter is greater than the amount of slides, back to the start.
counter = ( counter > slides.length-1 ) ? 0 : counter;
// inner = container to be animated
// in the complete callback restart the timer.
inner.animate(
{
'left': '-' + slides.eq( counter ).position().left
},
{
duration : settings.animationSpeed,
easing : 'easeInOutExpo',
complete : nextSlide()
});
}
Then it's just a matter of starting and stopping an interval:
var slideshow;
function startSlideshow()
{
slideshow = setInterval(nextSlide(),3000);
}
function stopSlideshow()
{
clearInterval(slideshow);
inner.stop();
}

Run setTimeout only when tab is active

Is there a way to stop setTimeout("myfunction()",10000); from counting up when the page isn't active. For instance,
A user arrives at a "some page" and stays there for 2000ms
User goes to another tab, leaves "some page" open.
myfunction() doesn't fire until they've come back for another 8000ms.

(function() {
var time = 10000,
delta = 100,
tid;
tid = setInterval(function() {
if ( document.hidden ) { return; }
time -= delta;
if ( time <= 0 ) {
clearInterval(tid);
myFunction(); // time passed - do your work
}
}, delta);
})();
Live demo: https://jsbin.com/xaxodaw/quiet
Changelog:
June 9, 2019: I’ve switched to using document.hidden to detect when the page is not visible.

Great answer by Šime Vidas, it helped me with my own coding. For completeness sake I made an example for if you want to use setTimeout instead of setInterval:
(function() {
function myFunction() {
if(window.blurred) {
setTimeout(myFunction, 100);
return;
}
// What you normally want to happen
setTimeout(myFunction, 10000);
};
setTimeout(myFunction, 10000);
window.onblur = function() {window.blurred = true;};
window.onfocus = function() {window.blurred = false;};
})();
You'll see that the window blurred check has a shorter time set than normal, so you can set this depending on how soon you require the rest of the function to be run when the window regains focus.

You can do something like:
$([window, document]).blur(function() {
// Clear timeout here
}).focus(function() {
// start timeout back up here
});
Window is for IE, document is for the rest of the browser world.

I use almost the same approach as Šime Vidas in my slider
but my code is based on document.visibilityState for page visibility checking:
document.addEventListener("visibilitychange", () => {
if ( document.visibilityState === "visible" ) {
slideshow.play();
} else {
slideshow.pause();
}
});
About Page Visibility
API: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

What you'd have to do is set up a mechanism to set timeouts at small intervals, keeping track of total elapsed time. You'd also track "mouseenter" and "mouseleave" on the whole page (the <body> or something). When the short-term timeouts expire, they can check the window state (in or out) and not restart the process when the window is not in focus. The "mouseenter" handler would start all paused timers.
edit — #Šime Vidas has posted an excellent example.

I've finally implemented a variation of #Šime Vidas' answer, because the interval was still running if I opened another program and the browser window was not visible, but the page executing the interval was the active browser tab. So, I've modified the condition to document.hidden || !document.hasFocus(). This way, if the document is hidden or the document doesn't have the focus, the interval function just returns.
(function() {
var time = 10000,
delta = 100,
tid;
tid = setInterval(function() {
if ( document.hidden || !document.hasFocus() ) { return; }
time -= delta;
if ( time <= 0 ) {
clearInterval(tid);
myFunction(); // time passed - do your work
}
}, delta);
})();

How do I wait until the user has finished writing down in a text input to call a function?

I'm designing a web site and I would like to be able to call a function 1 second after the last user input. I tried using onKeyUp, but it waited 1 second after the first keystroke.
Does anyone know how would this be possible?

Another similar approach, without globals:
var typewatch = function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
}
}();
...
<input type="text" onKeyUp="typewatch(function(){alert('Time elapsed!');}, 1000 );" />
You can this snippet here.

You can use a keyDown (or keyUp) event that sets a function to run in 1 second and if the user types another key within that second, you can clear the timeout and set a new one.
E.g.
var t;
function keyDown()
{
if ( t )
{
clearTimeout( t );
t = setTimeout( myCallback, 1000 );
}
else
{
t = setTimeout( myCallback, 1000 );
}
}
function myCallback()
{
alert("It's been 1 second since you typed something");
}

Nevermind, I found a way to do it. I call a function on each onkeyup() which increment a counter and then wait 1 second. After the 1 second elapsed, it decrement the counter and check if it's equal to 0.
var keystrokes = 0;
function askAgain()
{
++keystrokes;
setTimeout(reveal, 1000);
}
function reveal()
{
--keystrokes;
if (keystrokes == 0)
alert("Watch out, there is a snake!");
}

Just modify your html input and toss that first line into your existing functions so you're not having to recode anything you have. It will not affect any old code-calling functions either, since if onkeypress is not set then mykeypress will always be < 1.
var mykeypress=0;
var mysleep=1000; //set this higher if your users are slow typers
function mytest(id,text) {
mykeypress--; if(mykeypress > 0) { return; }
//anything you want when user stops typing here
alert("Keypress count at "+mykeypress+" ready to continue
id is "+id+" arguement is "+text);
}
input type="text" name="blah" id="55" onkeypress="mykeypress++"
onkeyup="myid=this.id;setTimeout(function (){mytest(myid,'a test')},mysleep)"
REVERT to old way seamlessly:
input type="text" name="blah" id="55" onkeyup="mytest(this.id,'a test')"

There is some simple plugin I've made that does exacly that. It requires much less code than some proposed solutions and it's very light (~0,6kb)
First you create Bid object than can be bumped anytime. Every bump will delay firing Bid callback for next given ammount of time.
var searchBid = new Bid(function(inputValue){
//your action when user will stop writing for 200ms.
yourSpecialAction(inputValue);
}, 200); //we set delay time of every bump to 200ms
When Bid object is ready, we need to bump it somehow. Let's attach bumping to keyup event.
$("input").keyup(function(){
searchBid.bump( $(this).val() ); //parameters passed to bump will be accessable in Bid callback
});
What happens here is:
Everytime user presses key, bid is 'delayed' (bumped) for next 200ms. If 200ms will pass without beeing 'bumped' again, callback will be fired.
Also, you've got 2 additional functions for stopping bid (if user pressed esc or clicked outside input for example) and for finishing and firing callback immediately (for example when user press enter key):
searchBid.stop();
searchBid.finish(valueToPass);

// Get the input box
let input = document.getElementById('my-input');
// Init a timeout variable to be used below
let timeout = null;
// Listen for keystroke events
input.addEventListener('keyup', function (e) {
// Clear the timeout if it has already been set.
// This will prevent the previous task from executing
// if it has been less than <MILLISECONDS>
clearTimeout(timeout);
// Make a new timeout set to go off in 1000ms (1 second)
timeout = setTimeout(function () {
console.log('Input Value:', input.value);
}, 1000);
});
<!-- a simple input box -->
<input type="text" id="my-input" />
Credits to:
Wait for User to Stop Typing, in JavaScript