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.
Related
How do you pass a variable from inside a timer event to outside the timer event ?
MyVar = false;
setTimeout(function() { myVar = true;}, 10000);
if(MyVar == true){
console.log("Hello World");
}
how to change timerStop from false to true after 30 seconds ?
render() {
const timerStop = false;
let button;
if(timerStop == true){
button = <Form onSubmit={this.onSubmit2} ><Button loading={this.state.loading2} >Button 2</Button></Form>;
}else{
button = <Form onSubmit={this.onSubmit1} ><Button loading={this.state.loading1} >Button 1</Button></Form>;
}
return (
<Layout>
<p></p>
{button}
<p></p>
</Layout>
);
}
Since setTimeout operates asynchronously, your code won't work as your if block will always be executed before the functon you passed to setTimeout.
A solution would be to place your if block inside your timer function so it will only be executed after your timer triggers and not immidiately.
Why dont you try to implement a pub-sub model here. I think there are lot of library out there could help you.
For example this
https://github.com/mroderick/PubSubJS
myVar = false;
var MY_TOPIC = 'change_value';
PubSub.subscribe(MY_TOPIC, function (msg, data) {
if(data == true){
console.log("Hello World");
}
});
setTimeout(function() {
myVar = true;
PubSub.publish(MY_TOPIC, myVar);
}, 10000);
I solved it using this code on node/react client side ,but now i got to find a way to keep it on server side so nobody can change value to false ...
state = {
Timer:false
};
const timerStop = this.state.Timer;
setTimeout(() => {
this.setState({Timer: true});
}, 10000);
I created one tab A, B, C. Each tab has a html page. If I click 1st tab, I have set a timeout function(javascript) for automatic logout. If I am clicking 2nd tab,the same timeout function running. But I want to stop /reset the 1st tab timer.
function timeout(){
var IDLE_TIMEOUT = 60; //seconds
var _idleSecondsTimer = null;
var _idleSecondsCounter = 0;
document.onclick = function() {
_idleSecondsCounter = 0;
};
document.onmousemove = function() {
_idleSecondsCounter = 0;
};
document.onkeypress = function() {
_idleSecondsCounter = 0;
};
_idleSecondsTimer = window.setInterval(CheckIdleTime, 1000);
function CheckIdleTime() {
_idleSecondsCounter++;
if (_idleSecondsCounter >= IDLE_TIMEOUT) {
window.clearInterval(_idleSecondsTimer);
alert("Time expired!");
document.location.href = "logout.php";
}
}
}
function opentab1(){
document.getElementById("tab1").innerHTML='<object type="text/html" data="tab1.php" ></object>';
}
function opentab2(){
document.getElementById("tab2").innerHTML='<object type="text/html" data="tab2.php" ></object>';
}
function opentab3(){
document.getElementById("tab3").innerHTML='<object type="text/html" data="tab3.php" ></object>';
}
function opentab4(){
document.getElementById("tab4").innerHTML='<object type="text/html" data="tab4.php" ></object>';
}
<body>
<div class="tab1" onload="timeout()" onclick="opentab1()">
</div>
<div class="tab2" onload="timeout()" onclick="opentab2()">
</div>
<div class="tab3" onload="timeout()" onclick="opentab3()">
</div>
<div class="tab4" onload="timeout()" onclick="opentab4()">
</div>
// loading an php file using on click function
<div class="container" id="tab1"></div>
<div class="container" id="tab2"></div>
<div class="container" id="tab3"></div>
<div class="container" id="tab4"></div>
</body>
Thanks in advance. Please guide.
You can make use of setTimeout().
The clearTimeout() method clears a timer set with the setTimeout() method.
The ID value returned by setTimeout() is used as the parameter for the clearTimeout() method.
Note: To be able to use the clearTimeout() method, you must use a global variable when creating the timeout method:
Syntax:
myVar = setTimeout("javascript function", milliseconds);
Then, if the function has not already been executed, you will be able to stop the execution by calling the clearTimeout() method.
Example:
var myVar;
function myFunction() {
myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}
function myStopFunction() {
clearTimeout(myVar);
}
In your case:
window.timeout1 = setTimeout(function() {
_idleSecondsCounter++;
if (_idleSecondsCounter >= IDLE_TIMEOUT) {
window.clearInterval(_idleSecondsTimer);
alert("Time expired!");
document.location.href = "logout.php";
}
}, 1000);
function stopTimeout1() {
clearTimeout(window.timeout1);
}
You can stop the timer whenever a new tab is clicked by editing your methods and stopping the current timer then starting a new one.
You can remove the onload from the divs
<div class="tab1" onload="timeout()" onclick="opentab1()">
to
<div class="tab1" onclick="opentab1()">
And then in your functions for retrieving the tab content, for example opentab1() edit them like the function below
function opentab2(){
//clear the previous timer
clearInterval(interval_name);
//start a new timer
timeout();
document.getElementById("tab2").innerHTML='<object type="text/html" data="tab2.php" ></object>';
}
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 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>
Context: On my product website I have a link for a Java webstart application (in several locations).
My goal: prevent users from double-clicking, i. e. only "fire" on first click, wait 3 secs before enabling the link again. On clicking, change the link image to something that signifies that the application is launching.
My solution works, except the image doesn't update reliably after clicking. The commented out debug output gives me the right content and the mouseover callbacks work correctly, too.
See it running here: http://www.auctober.de/beta/ (click the Button "jetzt starten").
BTW: if anybody has a better way of calling a function with a delay than that dummy-animate, let me know.
JavaScript:
<script type="text/javascript">
<!--
allowClick = true;
linkElements = "a[href='http://www.auctober.de/beta/?startjnlp=true&rand=1249026819']";
$(document).ready(function() {
$('#jnlpLink').mouseover(function() {
if ( allowClick ) {
setImage('images/jetzt_starten2.gif');
}
});
$('#jnlpLink').mouseout(function() {
if ( allowClick ) {
setImage('images/jetzt_starten.gif');
}
});
$(linkElements).click(function(evt) {
if ( ! allowClick ) {
evt.preventDefault();
}
else {
setAllowClick(false);
var altContent = $('#jnlpLink').attr('altContent');
var oldContent = $('#launchImg').attr('src');
setImage(altContent);
$(this).animate({opacity: 1.0}, 3000, "", function() {
setAllowClick(true);
setImage(oldContent);
});
}
});
});
function setAllowClick(flag) {
allowClick = flag;
}
function setImage(imgSrc) {
//$('#debug').html("img:"+imgSrc);
$('#launchImg').attr('src', imgSrc);
}
//-->
</script>
A delay can be achieved with the setTimeout function
setTimeout(function() { alert('something')}, 3000);//3 secs
And for your src problem, try:
$('#launchImg')[0].src = imgSrc;
Check out the BlockUI plug-in. Sounds like it could be what you're looking for.
You'll find a nice demo here.
...or just use:
$(this).animate({opacity: '1'}, 1000);
wherever you want in your code, where $(this) is something that is already at opacity=1...which means everything seemingly pauses for one second. I use this all the time.
Add this variable at the top of your script:
var timer;
Implement this function:
function setFlagAndImage(flag) {
setAllowClick(flag);
setImage();
}
And then replace the dummy animation with:
timer = window.setTimeout(function() { setFlagAndImage(true); }, 3000);
If something else then happens and you want to stop the timer, you can just call:
window.clearTimeout(timer);