I was wondering how I could modify this code so that it has a 2 second delay before the function become active:
<script type="text/javascript">
function iframe_onload()
{
var theWaitCell = document.getElementById('Wait1');
theWaitCell.style.display = "none";
}
</script>
Any help would be appreciated,
Thanks!
function iframe_onload()
{
var timer = setTimeout(function() {
var theWaitCell = document.getElementById('Wait1');
theWaitCell.style.display = "none";
}, 2000);
}
You can use the setTimeout() function:
Syntax:
// Fires yourFunction() after delayInMilliseconds has elapsed
// Note: You pass the function object as the first parameter
// do NOT execute the function here (i.e. omit the "()")
setTimeout(yourFunction, delayInMilliseconds);
Usage:
<script type='text/javascript'>
//Timeout Function (2000 ~ 2 Seconds)
setTimeout(iframe_onload, 2000);
//Action Function
function iframe_onload() {
var theWaitCell = document.getElementById('Wait1');
theWaitCell.style.display = "none";
}
</script>
Use setTimeout.
<script type="text/javascript">
setTimeout(
function ()
{
var theWaitCell = document.getElementById('Wait1');
theWaitCell.style.display = "none";
},
2000 // The 2nd arg is delay in milliseconds
);
</script>
Reference: https://developer.mozilla.org/en/DOM/window.setTimeout
See also: https://developer.mozilla.org/en/DOM/window.clearTimeout
I think if you want a nice delay you should use jquery but you could also call the function in the input with setTimeout();
<form>
<input type ="button lets say" onclick = "setTimeout('iframe_onload()', 2000);"/>
</form>
Related
So, I got an infinite loop to work in this function using setInterval attached to an onClick. Problem is, I can't stop it using clearInterval in an onClick. I think this is because when I attach a clearInterval to an onClick, it kills a specific interval and not the function altogether. Is there anything I can do to kill all intervals through an onClick?
Here's my .js file and the calls I'm making are
input type="button" value="generate" onClick="generation();
input type="button" value="Infinite Loop!" onclick="setInterval('generation()',1000);"
input type="button" value="Reset" onclick="clearInterval(generation(),80;" // This one here is giving me trouble.
setInterval returns a handle, you need that handle so you can clear it
easiest, create a var for the handle in your html head, then in your onclick use the var
// in the head
var intervalHandle = null;
// in the onclick to set
intervalHandle = setInterval(....
// in the onclick to clear
clearInterval(intervalHandle);
http://www.w3schools.com/jsref/met_win_clearinterval.asp
clearInterval is applied on the return value of setInterval, like this:
var interval = null;
theSecondButton.onclick = function() {
if (interval === null) {
interval = setInterval(generation, 1000);
}
}
theThirdButton.onclick = function () {
if (interval !== null) {
clearInterval(interval);
interval = null;
}
}
Have generation(); call setTimeout to itself instead of setInterval. That was you can use a bit if logic in the function to prevent it from running setTimeout quite easily.
var genTimer
var stopGen = 0
function generation() {
clearTimeout(genTimer) ///stop additional clicks from initiating more timers
. . .
if(!stopGen) {
genTimer = setTimeout(function(){generation()},1000)
}
}
}
Live demo
This is all you need!
<script type="text/javascript">
var foo = setInterval(timer, 1000);
function timer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
$(document).on("click", "#stop_clock", function() {
clearInterval(foo);
$("#stop_clock").empty().append("Done!");
});
</script>
I need to call spinner on click and it need to show up 2 seconds and then disappear.I cant use setTimeout and setInterval...is there any other function for that?
Ok, here's a quick example using setTimeout.
HTML
<button>Click me</button><br>
<div id="spinner">I am a spinner</div>
CSS
#spinner {
display: none;
}
JavaScript
// pick up the elements to be used
var button = document.querySelector('button');
var spinner = document.querySelector('#spinner');
// add an event to the button so that `showThing` is run
// when it is clicked
button.onclick = showThing;
// `showThing` simply displays the spinner and then
// calls `removeThing` after 2 seconds
function showThing() {
spinner.style.display = 'block';
setTimeout(removeThing, 2000)
}
// and `removeThing` removes the spinner
function removeThing() {
spinner.style.display = 'none';
}
DEMO
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
RE: Your comment about setTimeout()
To use setTimeout just once...
setTimeout(myfunction(), 2000);
You could try setting up CSS animation to do this. An explanation of CSS animation can be found here:
https://css-tricks.com/almanac/properties/a/animation/
Or use a setTimeout like this:
Javascript:
$('#something').hide();
$('#clicky').on('click', function () {
$('#something').show();
setTimeout(function () {
$('#something').hide();
}, 2000);
});
HTML:
<button id="clicky">Click me</button>
<p id="something">Boo!</p>
http://jsfiddle.net/jonnyknowsbest/kkqqjz0v/
I have the following code:
var comparePanel = $(__this.NOTICE_BODY);
clearTimeout(__this._timeout);
comparePanel.addClass(__this.VISIBLE);
__this._timeout = setTimeout(function () {
comparePanel.removeClass(__this.CL_VISIBLE);
}, 3000);
}
})
The following has been repeated a few times:
__this._timeout = setTimeout(function () {
comparePanel.removeClass(__this.CL_VISIBLE);
}, 3000);
I want to be able to do something like this:
__this._timeout = setTimeout(comparePanel, 3000);
How do I define and call that function?
PS. I am very very new to JavaScript so any explanation of what is going on is greatly appreciated.
You can pass an existing function to setTimeout like this:
// declare named function
function comparePanelTick() {
comparePanel.removeClass(__this.CL_VISIBLE);
}
Then use it like you show in the question:
__this._timeout = setTimeout(comparePanelTick, 3000);
Note: you already have a variable named comparePanel so use something else for the function name.
See this sample
<!DOCTYPE html>
<html>
<body>
<p>Click the first button alert "Hello" after waiting 3 seconds.</p>
<p>Click the second button to prevent the first function to execute. (You must click it before the 3 seconds are up.)</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myStopFunction()">Stop the alert</button>
<script>
var myVar;
function myFunction() {
myVar = setTimeout(function(){alert("Hello")}, 3000);
}
function myStopFunction() {
clearTimeout(myVar);
}
</script>
</body>
</html>
In this example, you can call it any time you want. However if you don't wrap your setTimeout() in a function, it'll be fired the second it gets initialized.
this._timeout = setTimeout(function(){
comparePanel();
}, 3000);
DEMO
function theTimeOutClass()
{
this._timeout = function(){
setTimeout(function(){
comparePanel();
}, 3000);
};
}
function comparePanel()
{
alert('I\'m comparing panels! ');
}
var toc = new theTimeOutClass();
toc._timeout();
I am trying to write a javascript function that when called performs function DoSomething() once,
but can be triggered to perform the function repeatedly until triggered to stop.
I am using setTimeout() function. I am not sure if this is best method from performance and memory point of view.
Also I would like to avoid global variable if possible
<!DOCTYPE html>
<html>
<script src="jquery.js"></script>
<script>
var globalCheckInventory = false;
$(document).ready(function(){
// start checking inventory
globalCheckInventory = true;
myTimerFunction();
});
// check inventory at regular intervals, until condition is met in DoSomething
function myTimerFunction(){
DoSomething();
if (globalCheckInventory == true)
{
setTimeout(myTimerFunction, 5000);
}
}
// when condition is met stop checking inventory
function DoSomething() {
alert("got here 1 ");
var condition = 1;
var state = 2 ;
if (condition == state)
{
globalCheckInventory = false;
}
}
</script>
This is probably the easier way to do what you're describing:
$(function () {
var myChecker = setInterval(function () {
if (breakCondition) {
clearInterval(myChecker);
} else {
doSomething();
}
}, 500);
});
Another way to do it would be the store the timer ID and use setInterval and clearInterval
var timer = setInterval(DoSomething);
function DoSomething() {
if (condition)
clearInterval(timer);
}
I see nothing wrong with your implementation other than the pollution of the global namespace. You can use a closure (self-executing function) to limit the scope of your variables like this:
(function(){
var checkInventory = false, inventoryTimer;
function myTimerFunction() { /* ... */ }
function doSomething() { /* ... */ }
$(document).ready(function(){
checkInventory = true;
/* save handle to timer so you can cancel or reset the timer if necessary */
inventoryTimer = setTimeout(myTimerFunction, 5000);
});
})();
Encapsulate it:
function caller(delegate, persist){
delegate();
if(persist){
var timer = setInterval(delegate, 300);
return {
kill: function(){
clearInterval(timer);
}
}
}
}
var foo = function(){
console.log('foo');
}
var _caller = caller(foo, true);
//to stop: _caller.kill()
So, I got an infinite loop to work in this function using setInterval attached to an onClick. Problem is, I can't stop it using clearInterval in an onClick. I think this is because when I attach a clearInterval to an onClick, it kills a specific interval and not the function altogether. Is there anything I can do to kill all intervals through an onClick?
Here's my .js file and the calls I'm making are
input type="button" value="generate" onClick="generation();
input type="button" value="Infinite Loop!" onclick="setInterval('generation()',1000);"
input type="button" value="Reset" onclick="clearInterval(generation(),80;" // This one here is giving me trouble.
setInterval returns a handle, you need that handle so you can clear it
easiest, create a var for the handle in your html head, then in your onclick use the var
// in the head
var intervalHandle = null;
// in the onclick to set
intervalHandle = setInterval(....
// in the onclick to clear
clearInterval(intervalHandle);
http://www.w3schools.com/jsref/met_win_clearinterval.asp
clearInterval is applied on the return value of setInterval, like this:
var interval = null;
theSecondButton.onclick = function() {
if (interval === null) {
interval = setInterval(generation, 1000);
}
}
theThirdButton.onclick = function () {
if (interval !== null) {
clearInterval(interval);
interval = null;
}
}
Have generation(); call setTimeout to itself instead of setInterval. That was you can use a bit if logic in the function to prevent it from running setTimeout quite easily.
var genTimer
var stopGen = 0
function generation() {
clearTimeout(genTimer) ///stop additional clicks from initiating more timers
. . .
if(!stopGen) {
genTimer = setTimeout(function(){generation()},1000)
}
}
}
Live demo
This is all you need!
<script type="text/javascript">
var foo = setInterval(timer, 1000);
function timer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
$(document).on("click", "#stop_clock", function() {
clearInterval(foo);
$("#stop_clock").empty().append("Done!");
});
</script>