setTimeout внутри setInterval, не получается установить интервал setTimeout

#setinterval #settimeout

Сделала анимацию: привидение появляется и исчезает. Причем время его присутствия
меньше, чем отсутствия, чего я и добивалась.

Но время присутствия не поддается регулированию, а, такое впечатление, что зависит
от времени всего интервала t

var t = setInterval(function appear(){
    var ghost = document.getElementById("ghost");
    if (ghost.style.display == "none")
            {ghost.style.display = "block";}
    else
            {var t1 = setTimeout(function disappear(){
            ghost.style.display = "none";
            }, 1)}      
}, 6000)


Исчезнуть оно должно по функции t1. Хочется сделать еще меньше. Задержка t1 урезана
до 1 мс, но никакой реакции. Отчего это?



var t = setInterval(function appear() {
  var ghost = document.getElementById("ghost");
  if (ghost.style.display == "none") {
    ghost.style.display = "block";
  } else {
    var t1 = setTimeout(function disappear() {
      ghost.style.display = "none";
    }, 1)
  }
}, 6000)
body {
  background: black url(https://s.cdpn.io/16327/texture_bg.jpg) no-repeat 50% 0px;
}

#ghost {
  position: absolute;
  left: 25%;
  display: none;
}




    

Ответы

Ответ 1

Проблема Вашего кода в том, что ожидание disappear вы пишете в ветке else.
Это значит, что у этой ветки нет шансов выполниться на текущей итерации setInterval.  

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

Вторая проблема в проверке:

ghost.style.display == "none"


Это не работает для стилей, полученных через каскадные таблицы (т.е. если стиль указан
не для самого элемента, а каким-то образом в css).
Можно либо вручную инициализировать стиль элемента, либо использовать getComputedStyle
чтобы получить актуальные стили элемента после применения css.



var ghost = document.getElementById("ghost");
ghost.style.display = "none";

var t = setInterval(function appear() {
  if (ghost.style.display == "none") {
    ghost.style.display = "block";
    // Просто убираем else
    setTimeout(function () {
      ghost.style.display = "none";
    }, 300)
  }
}, 3000)
body {
  background: black url(https://s.cdpn.io/16327/texture_bg.jpg) no-repeat 50% 0px;
}

#ghost {
  position: absolute;
  left: 25%;
  display: none;
}



Ответ 2

Так Вы можете менять промежутки времени видимой/невидимой картинки, изменяя значения
переменных showSeconds и hideSeconds.



var hideSeconds = 3;
var showSeconds = 1;
function switchGhost(show) {
  var ghost = document.getElementById("ghost");
  if (show) {
    ghost.style.display = "block";
    setTimeout(switchGhost, showSeconds * 1000, !show);
  } else {
    ghost.style.display = "none";
    setTimeout(switchGhost, hideSeconds * 1000, !show);
  }
}

switchGhost(false);
body {
  background: black url(https://s.cdpn.io/16327/texture_bg.jpg) no-repeat 50% 0px;
}

#ghost {
  position: absolute;
  left: 25%;
  display: none;
}