Develop Reference

Javascript Behaviour [duplicate]

This question already has answers here:
Calling functions with setTimeout()
(6 answers)
Closed 2 years ago.
I am trying to make a seconds countdown with Javascript.
Here is my HTML
<div id="ban_container" class="error center">Please wait
<span id="ban_countdown" style="font-weight:bold">
45</span>
seconds before trying again
</div>
And my JS:
<script type="text/javascript">
var seconds = <?php echo $user->getBlockExpiryRemaining(); ?>;
function countdown(element) {
var el = document.getElementById(element);
if (seconds === 0) {
document.getElementById("ban_container").innerHTML = "done";
return;
}
else {
el.innerHTML = seconds;
seconds--;
setTimeout(countdown(element), 1000);
}
}
countdown('ban_countdown');
</script>
However for some reason, it is not waiting the timeout time, but instead executes countdown right away so that when I refresh the page it just displays "done" right away. I know it is actually being executed multiple times because if I do innerHTML += seconds + " "; it counts down from 45. Why is the timeout being bypassed?

setTimeout(countdown(element), 1000); executes your function with that argument and passes the result into setTimeout. You don't want that.
Instead, execute an anonymous function that calls your function:
setTimeout(function() {
countdown(el); // You used `el`, not `element`?
}, 1000);

If you'd like to pass an argument to a function by setTimeout, try this:
setTimeout(countdown, 1000, element);
The syntax of setTimeout is the following:
setTimeout(function,milliseconds,param1,param2,...)

It is because setTimeout is asynchroneous. Try this:
setTimeout(function(){
countdown('ban_countdown'); //or elemement
}, 1000);
This will make the function countdown execute after 1000 miliseconds.

How to kill interval function dynamically [duplicate]

This question already has answers here:
Stop setInterval
(6 answers)
Closed 5 years ago.
I am working on the snippet below. Is there a way to check whether the setInterval() is really killed or still running in background processing?
Technically what I need to do is killing the JS setInterval whenever the .map is not in the page. My understanding is the setInterval() still running every 2 second just is not writing on the console because of if statement.
setInterval(
function() {
if ($(".map")[0]) {
console.log("Map is in the Page");
} else {
//Stop Interval
}
}, 2000);
setTimeout(function(){ $(".box").empty();
}, 9000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="map">Map in Here</div>
</div>

You need to call clearInterval() to stop the execution of the intervalled function.
Here's an example:
let i = 3;
let interval = setInterval(function() {
if (i > 0) {
console.log("Running " + i--);
} else {
clearInterval(interval);
console.log("Stopped");
}
}, 2000);

In order to kill an interval or timeout you should assign it to a variable for referencing. The specific functions are: clearInterval(your interval reference variable name) and clearTimeout(your timeout reference variable name).
var yourInterval = setInterval(
function() {
console.log("Still running?"); //for testing purpose.
if ($(".map")[0]) {
console.log("Map is in the Page");
} else {
clearInterval(yourInterval); //it kills this interval, if the interval already terminated, it won't do anything harm, nor produce an error message in the browser console.
}
}, 2000);
setTimeout(function(){ $(".box").empty();
}, 9000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="map">Map in Here</div>
</div>

Does anyone know how to make an image appear and then dissapear?

I want to delay the appearance of an image by about 5 mins, and then once it appears I want it to disappear after 10 seconds.
I've been able to delay the appearance of an image using the code
<script type="text/javascript">
function showBuyLink() {
document.getElementById("buylink").style.visibility = "visible";
}
// adjust this as needed, 1 sec = 1000
setTimeout("showBuyLink()", 300000);
</script>
But then i'm unable to make it disappear.

This one may helps to you
function showBuyLink() {
document.getElementById("buylink").style.display = "block";
setTimeout(function (){
document.getElementById("buylink").style.display = "none";
}, 10000);
}
// adjust this as needed, 1 sec = 1000
setTimeout(showBuyLink(), 300000);

The answer is actually in your own code: setTimeout(…) is used to call a function after some time, so you can just create a second function (i.e. "hideBuyLink") and put another call to setTimeout into showBuyLink().
However, it looks as if you tried to put JavaScript onto a real site on which one shall be able to buy stuff. I advise you to contact someone to help you with the coding, since this is a beginners question, and I am afraid that you might make mistakes which could eventually be exploited by someone malicious.

Just set another timer in the show function that points to a hide function:
<script type="text/javascript">
function showBuyLink() {
document.getElementById("buylink").style.visibility = "visible";
setTimeout("hideBuyLink()", 10000);
}
function hideBuyLink() {
document.getElementById("buylink").style.visibility = "hidden";
}
// adjust this as needed, 1 sec = 1000
setTimeout("showBuyLink()", 300000);
</script>
Alternetively, if you want it in one function:
<script type="text/javascript">
function showBuyLink(){
var buyLink = document.getElementById("buylink");
if(buyLink.style.visibility == "hidden"){
buyLink.style.visibility = "visible";
setTimeout("showBuyLink()", 10000);
}else{
buyLink.style.visibility = "hidden";
}
}
// adjust this as needed, 1 sec = 1000
setTimeout("showBuyLink()", 300000);
</script>

Yet another way to do it.
setTimeout(function() {
document.getElementById("buylink").style.visibility = "visible";
setTimeout(function() {
document.getElementById("buylink").style.visibility = "hidden";
}, 10000);
},300000);

setTimeout() is not waiting [duplicate]

This question already has answers here:
Calling functions with setTimeout()
(6 answers)
Closed 2 years ago.
I am trying to make a seconds countdown with Javascript.
Here is my HTML
<div id="ban_container" class="error center">Please wait
<span id="ban_countdown" style="font-weight:bold">
45</span>
seconds before trying again
</div>
And my JS:
<script type="text/javascript">
var seconds = <?php echo $user->getBlockExpiryRemaining(); ?>;
function countdown(element) {
var el = document.getElementById(element);
if (seconds === 0) {
document.getElementById("ban_container").innerHTML = "done";
return;
}
else {
el.innerHTML = seconds;
seconds--;
setTimeout(countdown(element), 1000);
}
}
countdown('ban_countdown');
</script>
However for some reason, it is not waiting the timeout time, but instead executes countdown right away so that when I refresh the page it just displays "done" right away. I know it is actually being executed multiple times because if I do innerHTML += seconds + " "; it counts down from 45. Why is the timeout being bypassed?

setTimeout(countdown(element), 1000); executes your function with that argument and passes the result into setTimeout. You don't want that.
Instead, execute an anonymous function that calls your function:
setTimeout(function() {
countdown(el); // You used `el`, not `element`?
}, 1000);

If you'd like to pass an argument to a function by setTimeout, try this:
setTimeout(countdown, 1000, element);
The syntax of setTimeout is the following:
setTimeout(function,milliseconds,param1,param2,...)

It is because setTimeout is asynchroneous. Try this:
setTimeout(function(){
countdown('ban_countdown'); //or elemement
}, 1000);
This will make the function countdown execute after 1000 miliseconds.

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