This is part of a larger Three.js project but basically what I am trying to do is display a div for 5 seconds and then making it disappear based on user interaction. However, if the user triggers the interaction before the 5 seconds are up, the current div must disappear to be replaced by a new div and stay for 5 seconds. I am using jQuery for DOM interaction
Here is my code:
let lastdiv = 1;
function displayState(text){
if ($("#temp"+String(lastdiv))){
$("#temp"+String(lastdiv)).remove();
}
lastdiv += 1
body.append('<div id = "temp' + String(lastdiv) +'" class = "state">' + text + '</div>');
setTimeout(function(){
if($("#temp"+String(lastdiv))){
$("#temp"+String(lastdiv)).remove();
}
}, 5000);
}
Currently what happens is that the div shows up for 5 seconds. If there is no further interaction it disappears. However, if there is another interaction within that 5 seconds, the new div does show up but it disappears in 5 seconds since the previous div was displayed i.e. if I trigger the interaction 2 seconds after div1 is displayed, div2 will replace div1 but will disappear after 3 seconds.
If there is a better way of doing this please let me know. Thanks in advance.
Keep track of the timeout and cancel it.
const body = $("body");
let lastdiv = 1;
let timer = null;
function hideElement() {
if (timer) {
window.clearTimeout(timer);
$("#temp"+ lastdiv).remove();
timer = null;
}
}
function displayState(text){
hideElement();
lastdiv += 1
body.append('<div id = "temp' + lastdiv +'" class = "state">' + text + '</div>');
timer = setTimeout(hideElement, 5000);
}
displayState("aaa");
window.setTimeout(() => displayState("bbb"), 2000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Store the returned value of setTimeout in a variable and call clearTimeout to cancel it.
Demo:
var a = setTimeout(function() {
one.style.display = "none";
}, 5000);
one.addEventListener('click', function() {
clearTimeout(a);
this.style.display = "none";
two.style.display = "block";
setTimeout(function() {
two.style.display = "none";
}, 5000);
})
#two {
display: none;
}
<div id="one">This div will disappear in 5 seconds unless you click it</div>
<div id="two">This div will disappear in 5 seconds</div>
Related
What I want:
There are two pictures that are being switched/swapped every three seconds.
I want to make it so that when the button is clicked, the picture switches and the auto-swap resets. So if the button is clicked, the image swaps and three seconds later, it will auto-swap, until the button is clicked again in which the cycle will repeat.
What I have right now
Currently, the problem is that: when the button is clicked, it messes up the timing of the auto-switches.
Edit:
Please don't create a new code base. Just modify mines. The code doesn't have to be an expert super concise level. I'm only three weeks into JavaScript (and it's my first programming language). I have to explain to classmates and it wouldn't be nice the code had elements I don't understand. So sorry for the inconvenience.
Right now I just need the button to correctly stop and restart the time.
<html>
<head>
<script>
let reset = setTimeout(change, 3000);
function change() {
if(document.getElementById("picture").src == "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350") {
document.getElementById("picture").src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350";
}
else {
document.getElementById("picture").src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350";
}
setTimeout(change, 3000);
}
function fastChange() {
clearTimeout(reset);
if(document.getElementById("picture").src == "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350") {
document.getElementById("picture").src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350";
}
else {
document.getElementById("picture").src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350";
}
}
</script>
</head>
<body>
<input type="button" onclick="fastChange();">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" id="picture">
</body>
</html>
The reason why your timer resets is because you are not clearing the timeout.
you need to make a reference to the timeout and then use clearTimeout() on it whne you make the fast change. I don't think it is possible or wise to do that inline the way you have it so you code needs to be refactored
let imgSrc1 = 'https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350'
let imgSrc2 = 'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350'
let imgElement = document.getElementById('picture');
let timeout;
function change() {
if(imgElement.src === imgSrc1) {
imgElement.src = imgSrc2;
} else {
imgElement.src = imgSrc1;
}
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(change, 3000);
}
You don't even need the second function fastChange. Now you can sent the onClick listener to change() like this
document.getElementById('whatever you want to click').onCLick = change;
Setting and clearing timeouts in multiple places will work, but I prefer using a "main loop" and a variable to count frames.
Here's an example that uses setInterval and resets a timer variable when the button was clicked:
const url1 = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350";
const url2 = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350";
function change() {
picture.src = picture.src == url1 ? url2 : url1;
}
var timer = 0;
setInterval(function() {
timer++;
time.textContent = timer;
if (timer === 30) fastChange();
}, 100);
function fastChange() {
change();
timer = 0;
}
picture.src = url1;
swap.onclick = fastChange;
#picture {
height: 70vh
}
<button id="swap">SWAP</button> <span id="time"></span><br>
<img id="picture">
You can do this by calling setTimeout and updating the index as necessary. Just be sure to store the most recent timeout id so that it can be cancelled on reset using clearTimeout.
// store the reference to the <img> that contains the picture
const pic = document.getElementById('picture')
// store a list (array) of the two picture urls
const sources = [
'https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350',
'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350'
]
// used to store a reference to the interval timer you created.
var lastTimer
// a starting index of the list (i.e. which image we are up to right now)
var index = 1
// this functions swaps the image and sets a timer
function startRotation() {
// update the index to the next one (goes 0-1-0-1->etc)
index = 1 - index
// sets the .src of the image element
pic.src = sources[index]
// starts a 3 second timer to call this same function again
// but also stores a reference to the timer so that it can be cancelled
lastTimer = setTimeout(startRotation, 3000)
}
// this functions resets the timer and restarts the process
function reset() {
// stop the current timer if there is one
if(lastTimer){
clearTimeout(lastTimer)
}
// restart the process
startRotation()
}
// start the swapping process on start
startRotation()
<input type="button" onclick="reset();">
<img id="picture">
NOT HOW YOU CLEARTIMEOUT:
<html>
<head>
<script>
var i;
function change() {
if(document.getElementById("picture").src == "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350") {
document.getElementById("picture").src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350";
}
else {
document.getElementById("picture").src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350";
}
i = setTimeout(change, 3000);
}
function fastChange() {
clearTimeout(i);
if(document.getElementById("picture").src == "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350") {
document.getElementById("picture").src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350";
}
else {
document.getElementById("picture").src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350";
}
i = setTimeout(change, 3000);
}
</script>
</head>
<body onload="setTimeout(change, 3000)">
<input type="button" onclick="fastChange();">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" id="picture">
</body>
</html>
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";
}
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>
I have a button that when is clicked, an image is created using javascript and get prepended to a div (adds it inside a div).
var image = new Image();
var imageHtml = image.toHtml();
$('div.board').prepend(imageHtml);
function Image()
{
this.toHtml = function ()
{
return '<img src=\"myImage.png\" width=\"40px\" height=\"40px\" />';
}
}
This image can be clicked in 2 seconds then user will have 1 more score and if not clicked in that time, then the image should disappear.
How to do that in javascript?
Thanks,
function start_game(image){
var timeout = null;
image.onclick = function(){
clearTimeout(timeout);
//addScore();
};
timeout = setTimeout(function(){
image.onclick = null;
image.style.display = "none";
// remove the image from dom if needed;
}, 2000);
}
Demo: http://jsfiddle.net/UpNCb/
see this, just difference is you going to hide instead of link display
or
give id 'img_id' to your image
function hideimage() {
document.getElementById('img_id').style.display = 'none';
}
setTimeout(hideimage, 10000);
Use the function setTimeout() and the CSS property display or visibility.
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);
}