hI got a problem to use jQuery to recall afunction if window is on focus.
And when window is not on focus (onblur) so pause that function until window is on focus again.
Here is my code:
function functiondosomething (user_id) {
var myInterval;
var time_delay = 1000;
$(window).focus(function () {
setTimeout(function() { functiondosomething (user_id); }, time_delay);
}).blur(function () {
clearTimeout(myInterval); // Clearing interval on window blur
});
setTimeout(function() { functiondosomething (user_id); }, time_delay);// ## problem here
}
My problem is :
When I remove that line (which I marked problem here above.) the
function will not work at first time until I click out of window to
make it onblur and come back on focus again, so it starting to work.
If I let that line (which I marked problem here above.) be there,
the function could not pause, even I click out of window to make it
be onblur.
When I click onfocus it start working and stop. I have to click out
of window and focus the window again again and again. Something like it need to be activate by clicking out of window and clicking back to window again.
What should I do ?
I see a few problems here:
You're not setting myInterval so when you call clearTimeout(myInterval) it's not clearing anything.
You're using the same function to set up your listeners and call setTimeout recursively. This means your handlers are being set every time you recur, and the recursion means it will run whether the handlers run or not.
I think you need to separate things a bit:
function functiondosomething(user_id) {
// Do stuff...
}
function setupHandlers(user_id) {
var myInterval;
var time_delay = 1000;
function doSomethingWrapper() {
functiondosomething(user_id);
myInterval = setTimeout(doSomethingWrapper, time_delay);
}
$(window).focus(function () {
doSomethingWrapper();
}).blur(function () {
clearTimeout(myInterval); // Clearing interval on window blur
});
doSomethingWrapper();
};
Related
I Want an Alert pop-up when focusing on input. It pops up correctly but when I click on 'OK' or 'x' i.e cancel, it Loops infinitely and never closes.
$('input').focus(function () {
alert('hello');
});
This is because the input is assuming the focus again when the alert is closed (which is the new focus when it appears - notice the outline around the button in the dialogue?)
If you only want to make the alert show once, you could perhaps write something a resembling this:
let hasShownAlert = false
$('input').focus(function () {
if (!hasShownAlert) {
hasShownAlert = true
alert('hello')
}
})
Of course you could improve this with state containers or something, but this is the simplest way you could achieve it. (Note: the hasShownAlert variable has to be defined outside of the onfocus handler, otherwise it'll be cleared up by the garbage collector.)
Updated: So if you don't want it to only show once, there are a couple of things you could do. The first, the simpler, would be listening for the click event, rather than focus. The second way could be setting a didShowAlert variable -- inverting the value each time the handler is fired. E.g...
let didShowAlert = false
$('input').on('focus', (ev) => {
if (didShowAlert) {
didShowAlert = false
} else {
didShowAlert = true
alert('hello')
}
})
You could try a hack like
$(document).on("focus", 'input:not(.unFocus)', function() {
alert('hello');
$('input').addClass('unFocus');
setTimeout(function() {
$('input').removeClass('unFocus');
}, 10);
});
It may not be the ideal way to do it, but it works :)
This are the code that I currently have:
var interval;
function printPageState() {
console.log("active");
}
window.onfocus = function() {
console.log("focus");
clearInterval(interval);
interval = setInterval(printPageState, 2000);
};
window.onblur = function() {
console.log("blur");
clearInterval(interval);
};
window.onscroll = function() {
console.log("scroll");
if (!document.hasFocus())
document.getElementById("some-id").focus();
clearInterval(interval);
interval = setInterval(printPageState, 2000);
};
I'm attempting to create a user attention checker/page-pinging like functionality. the checker currently has an event handler for blur, focus, and scroll event.
And I'm having the problem that was stated above when the following stuff are met.
Your browser had some viewable part on the browser view port which make it possible to scroll even if the page was not in focus.
The page was out of focus and or blur event was already fired.
I want to stop the interval but the blur event was not firing anymore as the browser isn't focus so I tried to force the focus state on one of the element but no locky it wasn't working.
Do the following issue to replicate the issue:
Open the page in minimized browser > then focus out the page.
Scroll on the visible browser view port but do not click (which won't make focus state true).
Need your valuable feedback on this. I have implemented idletimeout functionalty so that session will expire in 3 minutes if the user is idle.
In three scenario, I am resetting the timer.
On click or tap
after 2 seconds while processing is in progress
on scroll or scrollstart
The problem is sometimes session is getting timeout before the 3 minutes even if I tap, click or scroll and user is redirected to login page even if the function is gets called on tap click or scroll and resettimers is getting called. I am facing a bit hard time to figure out the loophole.
I am posting the code; please let me know if you notice anything.
// Set timeout variables.
var timoutNow = 180000 ;
var ua = navigator.userAgent;
var event = ((ua.match(/iPad/i)) || (ua.match(/iPhone/i)) || (ua.match(/iPod/i))) ? 'touchstart' : 'click';
var logoutUrl = Mobile+'/login.html'; // URL to logout page.
var timeoutTimer;
// Start timers.
function StartTimers() {
timeoutTimer = setTimeout("IdleTimeout()", timoutNow);
//console.log(timoutNow);
}
// Reset timers.
function ResetTimers() {
clearTimeout(timeoutTimer);
StartTimers();
}
// Processing time check.
function Laodtimercheck()
{
setInterval(function(){
if($("body").hasClass("loading-processing")==true)
{
ResetTimers();
}
}, 2000);
}
// Logout the user.
function IdleTimeout() {
sessionStorage.clear();
document.location.href = Mobile+'/login.html';
}
$(document).live(event, function(){
//console.log("Reset timers: ON TAP OR CLICK");
ResetTimers();
});
$(document).mouseover(function() {
//console.log("Reset timers: ONMOUSEOVER");
ResetTimers();
});
$(window).scroll(function() {
//console.log("Reset timers: SCROLL");
ResetTimers();
});
$(document).live("scrollstart", function(){
//console.log("Reset timers: SCROLLSTART");
ResetTimers();
});
EDIT: setTimeout only working first two times; next time ResetTimers are getting invoked but the setTimeout is not working or I might be missing something here as the session is getting timed out as per pervious two call time only....
The real problem that you're having is the folowing: "ResetTimers" not being invoke enough.
Why is not being invoked enough? I'll try to answer that.
All the logic is Ok with a few exceptions. There are two "problematic" events that not work or I think don't work like you want.
1.- LIVE (event)
That event is not being fired never. You cannot attach a live event to a document, yo need to specify a node, like html or body.
$("body").live(event, function(){
//console.log("Reset timers: ON TAP OR CLICK");
ResetTimers();
});
That's why when clicked the timer don't reset.
Another (and recomended) way to use a variable for binding events is to use .delegate().
Since jQuery 1.4.3+ is the recomended way of doing this.
$(document).delegate("body", event, function(){
//console.log("Reset timers: ON TAP OR CLICK (delegate)");
ResetTimers();
});
Any of those (live on body or delegate) would work and timer get reset on click or tap event.
2.- MOUSEOVER
There isn't a problem per se with this event, but I think it would be insuficient. MouseOver only fires where the pointer get on screen first time, if the mouse don't leave the window the mouseover never fires again. Maybe, a better or added way of control "mouse hovering" on the document is to use onmousemove event. Like I said in a comment before, I don't know if you want to be strict on this, so I left you a proposal and let's see if it fits your needs.
$(document).mouseover(function() {
console.log("Reset timers: ONMOUSEOVER");
ResetTimers();
});
In my tests, events get fires a lot, and the timers get reset on each event without problems. I hope it helps you.
Is there a way to "undo" a function executed by jQuery when the back button is clicked? For example, my function that I want to execute is named doSomething:
function doSomething(button) {
...clicking the button does something...
}
And I have an undo function that undoes the above function, undoDoSomething:
function undoDoSomething(button) {
....undoes the doSomething function...
}
How do I call the function for the button and then if the back button is clicked right after I execute the function, I can call the undoDoSomething function to undo that function?
I know jQuery History goes back to a previous page saved in history but how do I use that to call a function?
the history api makes this easy: http://jsfiddle.net/Z9dRY/
html:
<button>Increase</button>click back button to decrease
<span id="counter">0</span>
js:
$("button").click(function(){
var count = +$("#counter").text() + 1;
history.pushState({count:count});
$(counter).text(count);
})
$(window).on("popstate",function(e){
if (e.originalEvent.state)
$(counter).text(e.originalEvent.state.count);
})
On each action, add to the history, and then each back button click will undo each change (of course, you have to develop the undo part. In this case, i just stored what the count should be changed to at that point and changed it.)
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
Take note of the browser support, this code will work in all modern browsers and IE10+. oldIE will need a workaround either using an iframe or a hash in the url.
Here's the same example with an added decrease button to show that it doesn't really change anything: http://jsfiddle.net/Z9dRY/1/ it even inherantly supports the forward button(redo).
Update: fixed losing initial state: http://jsfiddle.net/Z9dRY/2/
You could call your undo function on the window.unload event
window.onbeforeunload = function(e) {
undoDoSomething();
};
You can usue beforeunload that is executed when leaving the page
var called = false;
function doSomething(button) {
called = true;
}
$(window).on('beforeunload',function(e){
if(called){
//call your function here
undoDoSomething()
}
});
I'd like to create a javascript mousedown event handler for a button. While the button is depressed, I need the handler to execute repeatedly until the button is released (mouseup is fired). E.g. holding an Up button should cause a text box value to increment until it is released.
What's the best way to handle this?
You can make use of setInterval: http://jsfiddle.net/5wypC/1/.
var interval = null;
var i = 0;
$('button').mousedown(function() {
clearInterval(interval); // Make sure to clear any intervals
// that are occasionally still running
interval = setInterval(function() {
$('textarea').val(i++);
}, 100);
});
$('button').mouseup(function() {
clearInterval(interval);
});