Develop Reference

How can I make a JS function wait to execute?

I'am pretty new to programming, and wanted to make a clicker-game with JS and HTML. Now I want to add achievements. They should pop up, and be displayed for a couple of (5 maybe?) seconds, then fade away.
I have a solution so far, but the function will run every 10sec. and if you should get the achievement after the 6th. second, the pop-up will be displayed for maybe 2 - 4 seconds, before fading away.
Briefly, when completed the achievement, the achievement (div) should pop-up, stay there for 5 seconds, then fade away.
Here is my JS:
//Check if achievement #1 is completed / true:
if(Ach1up == true){
Modal1stAch.style.display = "block";
Ach1up = null;
}
//Fade-out function
setTimeout(function () {
Modal1stAch.style.opacity = "0.0";
Modal1stAch.style.WebkitTransition = "2s";
Modal1stAch.style.transition = "2s";
}, 10000);

If i understood right, what you need is to grab your fadeout code into a function and call it 5s after the ach1up is true.
//Check if achievement #1 is completed / true:
if(Ach1up == true){
Modal1stAch.style.display = "block";
Ach1up = null;
setTimeout(function () { //wait 5 seconds to fade the popup
popupFadeOut();
}, 5000);
}
//Fade-out function
// you write it, and wait to be called.
function popupFadeOut() {
Modal1stAch.style.opacity = "0.0";
Modal1stAch.style.WebkitTransition = "2s";
Modal1stAch.style.transition = "2s";
}

Show div every 5 minutes javascript

I have a javascript code that is only showing the DIV one time after 5 minutes, but I want that script to execute/show the DIV id "off" again every 5 minutes...
How can I do that?
<div id="off">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</div>
<script>
var div = document.getElementById('off');
div.style.display = 'none';
setTimeout(function() {
div.style.display = 'block';
}, 5 * 60000);
</script>

Using setInterval()
setInterval(function() {
div.style.display = 'block';
}, 5 * 60000);
If at some point you want to stop your interval ticking, you should use it assigned to a function expression like:
var myIntv = setInterval(function() {
div.style.display = 'block';
}, 5 * 60000);
// (let's say we're inside a button click event)
// clearInterval( myIntv ); // Stop it
jsBin demo
Using setTimeout()
function doSomething (){
div.style.display = 'block';
setTimeout(doSomething, 5 * 60000); // Recall
}
doSomething(); // Start
jsbin demo

Please remove "I am inside the Div" from the code and it will work for you as you need :
<div id="off" style="display:none">I am inside the Div
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</div>
<script>
var div = document.getElementById('off');
setInterval(function(){
var style = div.offsetWidth > 0 || div.offsetHeight > 0;
if(style){
document.getElementById('off').style.display="none";
}else{
document.getElementById('off').style.display="block";
}
}, 300000);
</script>

probably not the most efficient way to approach this but it works. tweak as u see fit.
var myVar = setInterval(myTimer, 1000);
var oncount=0;
var offcount=0;
var bool=true;
function myTimer() {
if (bool){
oncount+=1
document.getElementById("demo").style.display='block';
if (oncount==300)
{
bool=false;
oncount=0;
}
}
if (bool==false){
offcount+=1
document.getElementById("demo").style.display='none';
if (offcount==300){
bool=true;
offcount=0
}
}
}

use setInterval can do any time you want .Also used == to make sure none or block.
<script>
var div = document.getElementById('off');
setInterval(function(){
changingDiv();
},5*6000);
function changingDiv(){
if(div.style.display == 'none' || div.style.display == ""){
div.style.display = 'block';
}
else{
div.style.display = 'none';
}
}
</script>

If I'm understanding you correctly, you want to show an element after 5 minutes and then hide it again after another 5 minutes (if this is not the case then please edit your question to clarify).
What's not clear is whether you just want to do this once or continuously so I've provided both options below, which use different classList. For the purposes of these examples, I have the changes triggering every 3 seconds (3000ms) so you can see it in action; just changes the occurrences of 3000 below to 300000 for 5 minutes.
To execute the sequence just once, nest a timeout within another timeout, removing and then adding .hide class:
var div=document.querySelector("div");
setTimeout(function(){
div.classList.remove("hide");
setTimeout(function(){
div.classList.add("hide");
},3000);// change to 300000 for 5 minutes
},3000);// change to 300000 for 5 minutes
div{font-family:sans-serif;}
.hide{
display:none;
}
<div class="hide">Lorem Ipsum ...</div>
To execute the sequence continuously, use an interval to toggle the .hide class.
var div=document.querySelector("div");
setInterval(function(){
div.classList.toggle("hide");
},3000);// change to 300000 for 5 minutes
div{font-family:sans-serif;}
.hide{
display:none;
}
<div class="hide">Lorem ipsum ...</div>

Javascript auto page refresh code

this is the code that comes in head section and it will automatically refresh the whole page in 1 min as i put 6000 in the code below
<script type="text/javascript">
setTimeout('window.location.href=window.location.href;', 6000);
</script>
is there any way for example, when there's 10 seconds left to refresh the page then, a button will display and say "Click here to reset timer" and it will reset that timer to 1 min again?

<script language="javascript">
var timeout,interval
var threshold = 15000;
var secondsleft=threshold;
startschedule();
window.onload = function()
{
startschedule();
}
function startChecking()
{
secondsleft-=1000;
if(secondsleft <= 10000)
{
document.getElementById("clickme").style.display="";
document.getElementById("timercounter").innerHTML = Math.abs((secondsleft/1000))+" secs";
}
}
function startschedule()
{
clearInterval(timeout);
clearInterval(interval);
timeout = setTimeout('window.location.href=window.location.href;', threshold);
secondsleft=threshold;
interval = setInterval(function()
{
startChecking();
},1000)
}
function resetTimer()
{
startschedule();
document.getElementById("clickme").style.display="none";
document.getElementById("timercounter").innerHTML="";
}
</script>
Please wait...<span id="timercounter"></span>
<button id="clickme" style="display:none;" onclick="javascript:resetTimer();">Click here to reset timer</button>

Assuming you have the following html for the button:
<button id="cancel-reload-button" style="display: none" onclick="cancelReload()">Cancel Reload</button>
And this as the script (Note: this gives the idea, but is not neccesarily fully tested):
// Variable for holding the reference to the current timeout
var myTimeout;
// Starts the reload, called when the page is loaded.
function startReload() {
myTimeout = setTimeout(function() {
document.getElementByID("cancel-reload-button").style.display = "inline";
myTimeout = setTimeout(function() {
window.location.reload();
} 10000)
}, 50000);
}
// Cancel the reload and start it over. Called when the button is
// clicked.
function cancelReload() {
clearTimeout(myTimeout)
startReload()
}
// On page load call this function top begin.
startReload();
I created two functions, one for starting the reload and the second one for cancelling it.
Then I assigned the timeout to the variable myTimeout which can be used to later cancel the timeout.
Then I called myTimeout twice - Once for 50 secs, at which point it shows the button and once for 10 secs after which it finally reloads.

How about below? If you click on OK to reset timer, it would keep giving the confirm box every 50 seconds. If you click cancel, it will refresh the page in 10 seconds.
setInterval(function(){ var r = confirm("Reset Timer");
if (r == true) {
setTimeout('window.location.href=window.location.href;', 60000);
} else {
setTimeout('window.location.href=window.location.href;', 10000);
}
}, 50000);
Note: In your question you specified 1 minute, but your code works for 6 seconds(6000 -- > 6 seconds not 60 seconds) I have included for a minute

You can use 2 setTimeout calls, one to make the "Reset" button show up and another one for the refresh timer reset. The trick is to store the second setTimeout on a global variable and use clearTimeout to reset it if the button is pressed.
Here is some JavaScript code to illustrate:
<script type="text/javascript">
var autoRefreshTime = 30 * 1000; // 60000ms = 60secs = 1 min
var warningTime = autoRefreshTime - (10 * 1000); // 10 secs before autoRefreshTime
waitTimeout = setTimeout('window.location.href=window.location.href;', autoRefreshTime);
warningTimeout = setTimeout('ShowResetButton();', warningTime);
function ShowResetButton() {
// Code to make the "Reset" button show up
}
// Make this function your button's onClick handler
function ResetAutoRefreshTimer() {
clearTimeout(waitTimeout);
waitTimeout = setTimeout('window.location.href=window.location.href;', autoRefreshTime);
}
</script>

The way I would do it is make a function with a timeout, and invoke that function
<script type="text/javascript">
var refreshFunc = function(){
setTimeout(function(){
var r = confirm("Do you want to reset the timer?");
if(r === false){
window.location.href=window.location.href;
}else{
refreshFunc();
}
}, 6000);
};
refreshFunc();
</script>
One big problem with using confirm in this case is you cannot program it to reject. You would have to implement you own modal/dialog box so you can auto reject in 10 seconds.

Try using setInterval():
var time;
$(function() {
time = $('#time');
$('#reset').on('click', reset);
start();
});
var timer, left;
var start = function() {
left = +(time.text()); //parsing
timer = setInterval(function() {
if (0 <= left) {
time.text(left--);
} else {
clearInterval(timer);
location.replace(location);
}
}, 1000);
};
var reset = function() {
if (timer) {
clearInterval(timer);
}
time.text('59');
start();
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1><span id='time'>59</span> second(s) left</h1>
<input id='reset' value='Reset' type='button' />

javascript runs twice [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have this code in my section:
function showIt() {
document.getElementById("hid").style.visibility = "visible";
}
setTimeout("showIt()", 6000); // 1000 = 1 sec
function showIt() {
document.getElementById("hid2").style.visibility = "visible";
}
setTimeout("showIt()", 7000); // 1000 = 1 sec
I am trying to reveal two separate elements. But the code always seems to work with only the first element.
This comes first on the page
<div id="hid2" style="visibility: hidden" class="video-arrow">
<p>Ready for some help growing your business?</p>
<div class="arrow-bg"><img src="img/arrow-bg.png" alt=""></div>
</div>
And This Comes Second
<div id="hid" style="visibility: hidden" class="header-button">
<div class="header-button-center">
<a href="">
<p class="offer">
<u>YES!</u>I Want To Get Instant Access To Interactive Offer!
<span>»</span></p>
</a>
</div>
<p class="guarantee">No worries. Our offer comes with a
<b>30-Day Money-Back Guarantee!</b></p>
</div>
Due to the nature of the div layout I can't put both elements in the same hidden div, and... ideally, I would display them at different times.

You cannot have two different functions with the same name. Try to change name the second function:
function showIt() {
document.getElementById("hid").style.visibility = "visible";
}
setTimeout(showIt, 6000); // 1000 = 1 sec
function showIt2 {
document.getElementById("hid2").style.visibility = "visible";
}
setTimeout(showIt2, 7000); // 1000 = 1 sec

you have defined showIt() function twice, its better if you create single function and pass element id as function parameter like
function showIt(id) {
document.getElementById(id).style.visibility = "visible";
}

You have two different functions with the same name in your code, It's not correct.
Try this:
function showIt1() {
document.getElementById("hid").style.visibility = "visible";
}
setTimeout(showIt1(), 6000); // 1000 = 1 sec
function showIt2() {
document.getElementById("hid2").style.visibility = "visible";
}
setTimeout(showIt2(), 7000); // 7000 = 7 sec
OR you can also try this one:
function showIt(Id) {
document.getElementById(Id).style.visibility = "visible";
}
setTimeout(showIt("hid"), 6000); // 1000 = 1 sec
setTimeout(showIt("hid2"), 7000); // 7000 = 7 sec

Use Like
function showIt1() {
document.getElementById("hid").style.visibility = "visible";
}
setTimeout("showIt1()", 6000); // 1000 = 1 sec
function showIt2() {
document.getElementById("hid2").style.visibility = "visible";
}
setTimeout("showIt2()", 7000); // 1000 = 1 sec

Pretend you are the web browser and read your code, s-l-o-w-l-y.
function showIt() {
document.getElementById("hid").style.visibility = "visible";
}
// cool, some code. This defines function showIt
setTimeout("showIt()", 6000); // 1000 = 1 sec
// a to do item. He sent me a string instead of a function, so in 6 seconds
// I will call eval on "showIt()";
function showIt() {
document.getElementById("hid2").style.visibility = "visible";
}
// hmm, he changes his mind. OK, now this is function showIt
setTimeout("showIt()", 7000); // 1000 = 1 sec
// another to do item. Another string.
// So in 7 seconds I will execute "showIt()" means by using eval().
// 6 seconds go by.
// Time to run "showIt()". Oh, its a function call.
// Use the latest version of showIt(), displaying hid2.
// ...
// another second goes by
// Time to run "showIt()". Same function we called a second ago.
// Make hid2 visible again. Oh, it already is. Oh, well.
Key points:
setTimeout doesn't wait. It is very fast. It sets up something to execute later.
When "showIt()" is executed, showIt() is the second version
It is better to give setTimeout a function than a string that calls a function, especially for cases where the function is only called once. You can use an anonymous function within the setTimeout parameter list.
setTimeout(
function(){ document.getElementById("hid").style.visibility = "visible"},
6000);
setTimeout(
function(){ document.getElementById("hid2").style.visibility = "visible"},
7000);
See also: MDN docs for window.setTimeout()

function showIt() {
setTimeout(function(){document.getElementById("hid").style.visibility = "visible";},6000);
setTimeout(function(){document.getElementById("hid2").style.visibility = "visible";},7000);
}

I think the reason is that you have 2 functions named showIt. The second showIt will overwrite the first one. You can try with different function names.

You can use the following:
function showAndTimeOut (id, time)
{
showIt(id);
setTimeout(function(){/* Dummy anonymous function! */}, time); // 1000 = 1 sec
// or may be you can use below line instead of above two:
setTimeout(showIt(id), time);
}
function showIt(id)
{
document.getElementById(id).style.visibility = "visible";
}
For calling you can use,
showAndTimeOut ("hid", 6000);
showAndTimeOut ("hid1", 7000);

Hide download link for 10 seconds? js

hey, how can I have my download link hidden, and make a count down type thing. Maybe have it count down from 10 and once it's done that have the download link appear, it would be best to do it in js right?
does anyone know how to do this? :D
Thanks

Complete example:
<span id="countdown"></span>
<a id="download_link" href="download.zip" style="display:none;">Download</a>
<noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
<script type="application/javascript">
(function(){
var message = "%d seconds before download link appears";
// seconds before download link becomes visible
var count = 10;
var countdown_element = document.getElementById("countdown");
var download_link = document.getElementById("download_link");
var timer = setInterval(function(){
// if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed
if (count) {
// display text
countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count);
// decrease counter
count--;
} else {
// stop timer
clearInterval(timer);
// hide countdown
countdown_element.style.display = "none";
// show download link
download_link.style.display = "";
}
}, 1000);
})();
</script>

You can use setInterval for this. setInterval behaves like a timer, where you can run a certain function periodically. Something like this should do the work(untested):
$(".link").hide();
var iteration = 0;
var timer = setInterval(function() {
if(iteration++ >= 10) {
clearTimeout(timer);
$(".link").show();
$(".counter").hide();
}
$(".counter").text(10 - iteration);
}, 1000);
This will initially hide the download link and run a function every second which counts down from 10. When we reaced ten, we hide the counter and show the link. ClearTimeout is used so that we don't count after we reached ten. Easy as dell.
Edit: As mentioned in the comments, this function is using jQuery to find the elements.

Take a look at the setTimeout function. You can do something like:
function displayLink() {
document.getElementById('link_id').style.display = 'block';
}
setTimeout(displayLink, 10000);

var WAIT_FOR_SECONDS = 10;
var DOWNLOAD_BUTTON_ID = "btnDownload";
if (document.body.addEventListener) {
document.body.addEventListener("load", displayDownloadButton, false);
} else {
document.body.onload = displayDownloadButton;
}
function displayDownloadButton(event) {
setTimeout(function() {
_e(DOWNLOAD_BUTTON_ID).style.display = "";
}, WAIT_FOR_SECONDS*1000);
}
function _e(id) {
return document.getElementById(id);
}