Скрыть div после x количество секунд

Question

Я пытаюсь скрыть определенный div после выполнения некоторого кода x пару раз. Это, похоже, не работает.

Сначала я попытался с помощью setTimeout в цикле для-:

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

я ожидал, что выше, приведет к отображая линию, ожидая одну секунду, затем происходит с для цикла. Оказалось, что пропустить таймаут полностью. Я пробовал записывать его в журнал, который затем отображал 1, четыре раза, несколько миллисекунд за другим.

Затем я попытался использовать SetInterval, но это тоже не дало мне желаемого результата. Оба раза он устанавливал стиль div на none прямо после входа в функцию, не принимая во внимание время.

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

Как я могу подождать 5 секунд, измените DIVS innerHTML в каждой второй, и установите видимость DIV никто? Обратите внимание: я не хочу использовать JQuery или любой другой сторонний инструмент.

Дополнение: Я использую следующую строку, чтобы изменить отображение div.

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

Эта линия находится в той же функции, что и тайм-аут/интервал, но непосредственно под ней.

Answer 1

В первом примере кода вы сразу устанавливаете четыре отдельных таймаута, каждый из которых занимает одну секунду. Все четыре будут выполнены примерно в одно и то же время.

Вам нужно настроить функцию, которая может вызываться один раз в секунду. Выполните обратный отсчет внутри этой функции. Назовите его только один раз, и, после завершения, он снова вызовет себя, пока счетчик не достигнет нуля. Как так:

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

Тогда ваша функция runMyCode() будет делать то, что он должен делать, когда обратный отсчет завершается - в вашем случае, выполняя свои изменения CSS.

Ваш второй блок кода выглядит так, как будто он должен работать, если вы изменяете CSS при вызове clearInterval().

Answer 2

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

Answer 3

setTimeout не блокирует выполнение JavaScript. Вот почему он продолжает выполнение цикла for, планирование каждой функции для выполнения почти в одно и то же время.

Существует нет встроенной функции сна AFAIK, и вы не хотели бы этого, поскольку это блокировало бы любое другое выполнение JS на пока все не закончится.

Вы можете запланировать таймауты для запуска в разное время.

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

Кроме того, из-за закрытия, вам нужно хранить оставшееся время в другой функции, в противном случае было бы захватить конечное значение I.

See fiddle.