CODEWITHSUNDEEP
javascript
Matthijs
Matthijs

Reputation: 3170

Hide div after x amount of seconds

I am trying to hide a certain div after executing some code an x couple of times. This however doesn't seem to work.

First I tried using setTimeout in a for-loop:

var startCap = 1;
var cap = 5;
for(cap; cap > startCap; cap--){
    setTimeout(function(){              
        startTimeElement.innerHTML = "Starting in " + cap + ".";
    }, 1000);
}

I had expected the above to result into displaying the line, waiting one second, then going on with the for-loop. It turned out to skip the timeout entirely. I tried logging it, which then displayed 1, four times, a few miliseconds after another.

Then I tried to make use of SetInterval, but that didn't give me the desired result either. Both times it set the style of the div to none straight after getting into the function, not taking the time into account.

var startCap = 1;
var cap = 5;
var interval = function(){  
    startTimeElement.innerHTML = "Starting in " + cap + ".";
    cap--
    if(cap < startCap){
        clearInterval(capInterval);
    }
};

var capInterval = setInterval(interval, 1000);

How can I wait 5 seconds, change the divs innerHTML in each second, and set the visibility of the div to none? Note that I am not looking to use JQuery or any other third party tool.

Addition: I use the following line to change the display of the div.

var startScreenElement = document.getElementsByClassName('startScreen')[0];
startScreenElement.style.display = "none";

This line is in the same function as the timeout/interval, but directly below it.

Upvotes: 0

Views: 705

Answers (3)

Octopus
Octopus

Reputation: 8325

In your first code example you are immediately setting four separate timeouts that each take one second. All four will complete at roughly the same time.

You need to set up a function that can be called once a second. Perform the countdown inside that function. Call it only once and upon completeion have it call itself again until the counter reaches zero. Like so:

var secs = 5;
function runOnceASecond() {
  startTimeElement.innerHTML = "Starting in " + secs + ".";
  secs -= 1;
  if ( secs==0 ) runMyCode();
  else {
    setTimeout(runOnceASecond,1000);
  }
}
runOnceASecond();

Then your function runMyCode() will do what it needs to do when the countdown completes -- in your case, performing your CSS modifications.

Your second block of code looks like it should work, as long as you are modifying the CSS when you call clearInterval().

Upvotes: 3

Ortiga
Ortiga

Reputation: 8814

setTimeout does not block JavaScript execution. That's why it continue execution of the for loop, scheduling each function to execute at almost the same time

There is no native sleep function AFAIK, and you wouldn't want that, as it would block any other JS executing on the page until everything finishes.

You can schedule the timeouts to run at different times.

var cap = 5;
for(var i = 0; i < cap; i++){
    setTimeout((function(){
        var remainingTime = cap - i;

        return function(){              
            startTimeElement.innerHTML = "Starting in " + remainingTime + ".";
        }
    })(), 1000 * (i + 1));
}

Also, because of closures, you need to store the remaining time in a different function, otherwise it would capture the final value of i.

See fiddle.

Upvotes: 0

sebnukem
sebnukem

Reputation: 8323

var startScreenElement = document.getElementsByClassName('startScreen')[0];
var cap = 5;

function interval() {
  var startScreenElement;
  if (cap > 0) {
    // countdown code
    cap--;
    startTimeElement.innerHTML = "Starting in " + cap + ".";
    setTimeout(interval, 1000);
  } else {
    // your code when countdown is done
    if (startScreenElement) startScreenElement.style.display = "none";
  }
}
setTimeout(interval, 1000);

Upvotes: 0

Related Questions