How do I separate functionality with Javascript code to set Timeout? - javascript

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();

Related

Javascript: Automatically clicking a button when countdown is complete

I am trying to display the alert message when the countdown is complete, I am trying the following code but its does not work please help!
<!DOCTYPE html>
<html>
<body>
<p id=count></p>
<form>
<button id="autoClickBtn" onclick="autoClick()">Click me</button>
</form>
<script>
function autoClick(){alert("I am loaded and automatically clicked");}
var count = 5;
var interval = setInterval(function () {
document.getElementById('count').innerHTML = count;
count--;
if (count === -1) {
clearInterval(interval);
window.onload = function () { document.getElementById("autoClickBtn").click() };
}
}, 1000 );
</script>
</body>
</html>
If you want to alert once after a certain time. Use setTimeout function. You can add the delay in milliseconds. In the example below I have added a delay of 2 secs.
setInterval, on the other hand, will run indefinitely again and again after time period defined
setTimeout(function () {
window.alert('This is an alert');
}, 2000);

Running a Javascript function after a certain time

I am new to programming and javascript.
What I want to do :
Javascript function running on pageload, in this case showVideo(). I want to run this function for a say 10 seconds and then move to the next function.
function(){
dostuff();
// dostuff for 10 seconds
// now stop dostuff
// donewstuff();
}
<div class="wrapper">
<div class="screen" id="screen-1" data-video="vid/river.mp4">
<img src="img/bird.jpg" class="big-image" />
</div>
<div class="screen" id="screen-2" data-video="vid/sim.mp4">
<img src="img/spider.jpg" class="big-image" />
</div>
</div>
</div>
<script>
$(function(){
var
BV,
videoPlayer,
BV = new $.BigVideo();
BV.init();
showVideo();
BV.getPlayer();
function showVideo() {
BV.show($('#screen-1').attr('data-video'),{ambient:true});
$('#screen-1').find('.big-image').transit({'opacity':0},500)
setTimeout(function(){showVideo2},40000);
}
function showVideo2() {
BV.show($('#screen-2').attr('data-video'),{ambient:true});
$('#screen-2').find('.big-image').transit({'opacity':0},500)
}
I tried :
setTimeout(function(){showVideo2},40000)
but it did not work. Any ideas?
You didn't actually call the function. Try this:
setTimeout(function() {
showVideo2();
}, 40000);
Note the () in showVideo2().
You can use setTimeout()
var stopped = false;
setTimeout(function() {
stopped = true;
}, 10000);
while (!stopped) {
// Do stuff here.
}
My guess is that you would like to invoke showVideo and then 40s later invoke showVideo2. What you have is close, however you are not invoking showVideo2 in your timeout.
You have two solutions that would fix it:
Change
function showVideo() {
BV.show($('#screen-1').attr('data-video'),{ambient:true});
$('#screen-1').find('.big-image').transit({'opacity':0},500)
setTimeout(function(){showVideo2},40000);
}
To either:
function showVideo() {
BV.show($('#screen-1').attr('data-video'),{ambient:true});
$('#screen-1').find('.big-image').transit({'opacity':0},500)
setTimeout(showVideo2,40000);
}
or:
function showVideo() {
BV.show($('#screen-1').attr('data-video'),{ambient:true});
$('#screen-1').find('.big-image').transit({'opacity':0},500)
setTimeout(function(){showVideo2(); },40000);
}
Without testing this should work. Please comment if you have any questions.

Onclick button timeout javascript

Can someone help me get started with a button timeout feature. All I want is a button (when clicked) it becomes inactive for 2 seconds. After which it is active again.
<input type="button" value="click" id="click" onclick="foo(this);"/>​
function foo(obj) {
obj.disabled = true;
setTimeout(function() {
obj.disabled = false;
}, 2000);
}​
LIVE DEMO
window.setTimeout on MDN:
Executes a code snippet or a function after specified delay.
Start of with:
<button>Click me!</button>
Add an event:
<button onClick="...">Click me!</button>
Now we need to put something in place of that ....
this can be used to mean "the button that was just clicked"
this.disabled can be set to true or false to disable (or re-enable) the button.
setTimeout(function() {...},2000); executes the anonymous function after two seconds have passed (or as near as the timer resolution allows).
Again, need to put something in the .... I've already told you how to re-enable the button.
Although, since this isn't terribly reliable inside anonymous functions, it's probably better to start with var t = this; and use t to mean the button.
With all that in place, you have:
<button onClick="var t = this; t.disabled = true; setTimeout(function() {t.disabled = false;},2000);">Click me!</button>
Done. I hope this explanation was helpful.
PS. To those who are against inline event handlers:
This is an example
The OP is a beginner
An inline event is good enough
The function setTimeout allows you to specify a function to be called after an amount of milliseconds has passed. In this case, I passed in an anonymous function, that is, a function that does not have a name that is used for the sole purpose of re-enabling my button after 2 seconds.
var mybutton = document.getElementById("mybutton");
mybutton.onclick = function() {
mybutton.disabled = true;
setTimeout(function() {
mybutton.disabled = false;
}, 2000);
};​
Live example
You can use setTimeout() function in javascript. Something like
<html>
<head></head>
<body>
<input id="test" type="submit" value = "clickme" onclick="deactivatefunc()">
<script type="text/javascript">
function deactivatefunc()
{
var btn = document.getElementById("test");
btn.disabled = true;
var mytimer = setTimeout(activate,2000);
}
function activate () {
var btn = document.getElementById("test");
btn.disabled = false;
}
</script>
</body>
</html>

In need of a Javascript Delay

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>

Color-cycling an element not working?

I am a beginner in javascript, can you tell me what's wrong with the below code?
I want this to invoke buttonPressed() when a button gets pressed. From buttonPressed() it should call changeColor1(), changeColor1() should change the text color of a paragraph, and start a timer to invoke changeColor2(). Similarly changeColor2() should also change the color and call changeColor1() once the timer expires.
<html>
<head>
<script type="text/javascript">
function changeColor2()
{
alert("2");
var v = document.getElementById("onet");
v.style.color = rgb(0,255,255); // this statement is not working
var t=setTimeout(changeColor1,3000);
}
function changeColor1()
{
alert("1");
var v = document.getElementById("onet");
v.style.color = rgb(255,255,0); // this statement is not working
var t=setTimeout(changeColor2,3000);
}
function buttonPressed()
{
alert("Hello");
changeColor1();
}
</script>
</head>
<body>
<p id="onet"> Hello how are you? </p>
<form>
<input type="button" value="Display alert box!" onClick="buttonPressed()" />
</form>
</body>
</html>
Do not invoke the function, pass the reference only:
var t=setTimeout(changeColor2,3000);
I think you want style.color not .color.
By the way... please tell us what the code is supposed to actually do and what is wrong initially.
You need to quote style property values-
v.style.color = 'rgb(255,255,0)';
1) I don't like the fact that you have two timeouts set. Just call one function and use a flag to toggle between the two options.
2) The parameter to setTimeout that you want to use is a function pointer (changeColor) not the result of a function call (changeColor())
var flag = false;
var t;
function changeColor()
{
var v = document.getElementById("onet");
if(flag){
v.color = rgb(255,255,0);
} else {
v.color = rgb(0,255,255);
}
flag = !flag;
}
function buttonPressed()
{
alert("Hello");
t=setInterval(changeColor,3000);
}
Not really knowing what it is you're trying to do, I can tell you that your button's onClick handler references a method name that isn't in your code. Judging by the names of your methods, I think you meant to put "buttonClicked" in there.
Nevermind, looks like you changed it while I was typing.
Instead of v.color = rgb(0,255,255); use v.style.color = "#0ff".

Categories