myfucntion = send request after 5 sec
document.ready(myfucntion)
$(window).focus(myfucntion)
$(window).blur(stop(myfucntion))
is this possible to stop a function on blur called previously in document.ready
Have a global timer:
var intervalId;
And it would be better to have two functions:
startfunction() {
intervalId = setTimeout(function () {
// send request after 5 seconds
}, 5000);
}
stopfunction() {
clearTimeout(intervalId);
}
And use them like this:
$(document).ready(startfunction);
$(document).ready(function () {
$(window).focus(startfunction);
$(window).blur(stopfunction);
});
Here is an example of how to make what you want work
var timer; // make it global so it can be accessed inside functions
var myFunction = function () {
timer = setTimeout(function() {
//do something after 5 seconds
}, 5000);
}
var stopMyFunction = function () {
clearTimeout(timer);
}
$(document).ready(myFunction)
$(window).focus(myFunction)
$(window).blur(stopMyFunction))
Related
I have this script:
<script>
var Webflow = Webflow || [];
Webflow.push(function() {
MemberStack.onReady.then(function(member) {
if(member.memberPage){
window.location.replace(member.memberPage);
}else{
setTimeout(function() { location.reload(true); }, 3000);
}
})
});
</script>
I would like this script to run after 5 seconds after the page loads, how could it be solved?
How about window.onload along with setTimeout ?
Example:
window.onload = function() {
setTimeout(function () {
// Do stuff here
}, 5000);
}
or, you may also use event listeners
function delayAndExecute() {
setTimeout(function () {
// Do stuff here
}, 5000);
}
// Everything but IE
window.addEventListener("load", function() {
delayAndExecute();
}, false);
// IE
window.attachEvent("onload", function() {
delayAndExecute();
});
<script>
var Webflow = Webflow || [];
window.onload = function () {
setTimeout(function () {
Webflow.push(function () {
MemberStack.onReady.then(function (member) {
if (member.memberPage) {
window.location.replace(member.memberPage);
} else {
setTimeout(function () { location.reload(true); }, 10);
}
})
});
}, 5000);
}
</script>
So i I tried to do this but the script repeats itself every 5 seconds without taking setTimeout (function () {location.reload (true);}, 10)into consideration; I would like the script to start only the first time in 5 seconds later loading the script
5 seconds after window.onload you are pushing a function into the webflow Array.
But you are never calling it. Add webflow[0](); to your code;
var Webflow = Webflow || [];
window.onload = function () {
setTimeout(function () {
Webflow.push(function () {
MemberStack.onReady.then(function (member) {
if (member.memberPage) {
window.location.replace(member.memberPage);
} else {
setTimeout(function () { location.reload(true); }, 10);
}
})
});
webflow[0]();
}, 5000);
}
I have this JSFiddle that I am working on, and when my mouse leaves the textarea, it closes. But, I can't find a way to cancel this timer if I hover back over it. I've even tried some examples from here. This is the code that closes the text box --
function close() {
setTimeout(function() {
$(Img).css("transform", "rotateX(0deg)");
$(Txt).css("transform", "rotateX(90deg)");
}, 1000);
}
$(Txt).on("mouseleave", function() {
close();
$(Txt).blur();
});
The link you posted from W3Schools has exactly what you need...
setTimeout() returns a reference value, which you can pass to clearTimeout() later to cancel the timer.
var timerID; //set outside the function
function close() {
timerID = setTimeout(function() {
$(Img).css("transform", "rotateX(0deg)");
$(Txt).css("transform", "rotateX(90deg)");
}, 1000);
}
$(Txt).on("mouseleave", function() {
close();
$(Txt).blur();
});
//somewhere else do this...
clearTimeout(timerID);
setTimeout function returns you the handler which you can later use to reset the timer.
For example,
var myVar;
function myFunction() {
myVar = setTimeout(function(){ alert("Hello") }, 3000);
}
function myStopFunction() {
clearTimeout(myVar);
}
Have you tried:
var myTimeout;
function close() {
myTimeout = setTimeout(function() {
$(Img).css("transform", "rotateX(0deg)");
$(Txt).css("transform", "rotateX(90deg)");
}, 1000);
}
$(Txt).on("mouseleave", function() {
close();
$(Txt).blur();
}).on("mouseenter", function() {
clearTimeout(myTimeout);
});
i have this JS Code:
<script>
$(document).ready(function () {
window.setTimeout(function () {
$('#logout_warning').reveal();
}, 6000)
});
$(document).ready(function () {
window.setTimeout(function () {
location.href = "/login/logout.php?url=/index.php?r=inactivity";
}, 12000)
});
</script>
it displays a DIV after X Seconds then redirects the page after Y Seconds
is there a way to create a link that will reset the timer back to X seconds and without having to refresh the page?
You could write a wrapper for setTimeout like this
function myTimeout(fn, delay) {
var o = {i: null};
o.cancel = function () {
if (o.i) window.clearTimeout(o.i);
};
o.reset = function () {
if (o.i) window.clearTimeout(o.i);
o.i = window.setTimeout(fn, delay);
};
o.reset();
return o;
}
Then
// common (ancestor?) scope
var t;
// descendant scope, set
t = myTimeout(function () {
$('#logout_warning').reveal();
}, 6000);
// descendant scope where you attach listener to your link
$('#my_link').on('click', function () {
t.reset(); // re-start the timeout
return false;
});
This is a followup to this question, where I found out how to make code be repeated every x seconds. Is it possible to make an event that can change this? I.e. I have a checkbox which is meant to control whether this is repeated or not, so I figured I'd need something like this:
$(checkbox).bind("change", function() {
switch(whether if it is ticked or not) {
case [ticked]:
// Make the code repeat, while preserving the ability to stop it repeating
case [unticked]:
// Make the code stop repeating, while preserving the ability to start again
}
});
I have no idea what I could put in the cases.
You can do it by assigning your setInterval function to a variable.
var interval = setInterval(function() { }, 1000);
and then you can stop setInterval by
clearInterval(interval);
p.s.
to start your interval you need to call var interval = setInterval(function() { }, 1000); again
You can either stop and start the interval:
var timer;
function start() {
timer = window.setInterval(function(){
// do something
}, 1000);
}
function stop() {
window.clearInterval(timer);
}
start();
$(checkbox).bind("change", function() {
if ($(this).is(':checked')) {
start();
} else {
stop();
}
});
Or you can have a flag causing the interval to skip the code:
var enabled = true;
var timer = window.setInterval(function(){
if (!enabled) {
// do something
}
}, 1000);
$(checkbox).bind("change", function() {
enabled = $(this).is(':checked');
});
function fooFunc() {
$('#foo').text(+new Date());
}
var id;
var shouldBeStopped = false;
$('input').change(function() {
if (shouldBeStopped)
clearInterval(id);
else
id = setInterval(fooFunc, 200);
shouldBeStopped = !shouldBeStopped;
});
Live DEMO
I'm not a JS coder my any means. I know enough to make things do what I want, but couldn't code from scratch. My issue is:
We have a shopping cart that when you add a product the cart shows itself for 4 secs unless the customer hovers over the cart. I can't seem to get it to stop the timeout when the cursor is hovered over it.
$(document).ready(function () {
setTimeout(function () { $('#ctl00_ctl00_ctlHeader_divOrderProducts').hide(); }, 4000);
});
Store the return of setTimeout() in a variable, and use that to clearTimeout():
// t is a global scope variable.
// Probably a good idea to use something better than 't'
var t;
$(document).ready(function () {
// Store the return of setTimeout()
t = setTimeout(function () { $('#ctl00_ctl00_ctlHeader_divOrderProducts').hide(); }, 4000);
});
$('cart-selector').hover(function() {
if (t) {
// Call clearTimeout() on hover()
clearTimeout(t);
}
});
You need to set your timer to a variable:
var timer1 = setTimeout(function () { ... })
then use:
clearTimeout(timer1)
You need to save the return value of setTimeout() so you can later use it with clearTimeout(). One way to that is like this:
$(document).ready(function () {
var hideTimer = setTimeout(function () {
$('#ctl00_ctl00_ctlHeader_divOrderProducts').hide();
}, 4000);
$('#ctl00_ctl00_ctlHeader_divOrderProducts').hover(function() {
if (hideTimer) {
clearTimeout(hideTimer);
hideTimer = null;
}
});
});
If you want to re-enable the timer when the mouse leaves the cart again (assuming #ctl00_ctl00_ctlHeader_divOrderProducts is the cart), you can do so like this:
$(document).ready(function () {
var hideTimer;
function delayHideCart() {
if (!hideTimer) {
hideTimer = setTimeout(function () {
$('#ctl00_ctl00_ctlHeader_divOrderProducts').hide();
}, 4000);
}
}
delayHideCart();
$('#ctl00_ctl00_ctlHeader_divOrderProducts').hover(function() {
if (hideTimer) {
clearTimeout(hideTimer);
hideTimer = null;
}
}, function() {
delayHideCart();
});
});
This should do it:
$(document).ready(function () {
var timeout = setTimeout(function () { $('#ctl00_ctl00_ctlHeader_divOrderProducts').hide(); }, 4000);
$('#ctl00_ctl00_ctlHeader_divOrderProducts').mouseover(function() {
clearTimeout(timeout);
});
});
You save the timeout as a variable and then call clearTimeout when you mouseover the cart and pass in that timeout.
var timer = window.setTimeout(function () {
$('#ctl00_ctl00_ctlHeader_divOrderProducts').hide();
if(someCondition)clearTimeout(timer);
}