javascript - повторять действие через равные промежутки времени после включения onlick - PullRequest
Новая
       12

javascript - повторять действие через равные промежутки времени после включения onlick

0 голосов
/ 22 апреля 2020

У меня есть div, который отображается с помощью onclick, а затем исчезает с setTimeout:

css

#light {
position:absolute;
left:40px;
top:45px;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:20px solid red;
opacity:0;
}


js (не знаю, используется ли синтаксис правильно, но работает) 

function change() {
  var element = document.getElementById("light");
  element.style.opacity = "1";
  element.style.transitionDelay = "4s", // only the 1stime with onclick
    setTimeout(() => {
      element.style.opacity = "0";
    }, 5000)
}


html

<button onclick="change()">light</button>
<div id="light"></div>

Мне бы хотелось, чтобы это действие повторялось само по себе каждые 2 минуты:
- через 2 минуты #light отображается снова в течение 5 секунд (opacity = "1")
- затем снова скрывается (opacity = "0")

и т. д., и т. д. каждые 2 мин.

Я знаю о методе setInterval (), но мне сложно его правильно использовать - скрипт не работает с регулярным интервалом (каждые 2 минуты).

ps: я выглядел похожим вопросы, но все это выходит за рамки моей компетенции (ie, 0).

1 Ответ

1 голос
/ 22 апреля 2020

Я не уверен, почему вы не можете использовать тайм-ауты? Не будет ли что-то подобное этой работой? (вы можете настроить таймеры ... Я не хотел ждать минуты, чтобы увидеть мигание индикатора, поэтому я установил его на несколько секунд) 

let timer;
let started = false;
let delayTimer;
const lightOn = (clicked) => {
  // do nothing if clicked for the second time
  if (clicked && started) {return;}
  const fn = () => {
    const element = document.getElementById("light");
    element.classList.add('light-on');
    timer = setTimeout(lightOff, 1000);
  };
  if (clicked) {
    delayTimer = setTimeout(fn, 3000);
  } else {
    fn();
  }
  started = true;
}
const lightOff = () => {
  const element = document.getElementById("light");
  element.classList.remove('light-on');
  timer = setTimeout(lightOn, 2000);
}
const stop = () => {
  clearTimeout(timer);
  clearTimeout(delayTimer);
  timer = undefined;
  delayTimer = undefined;
  started = false;
}
.light {
  background-color: gray;
  opacity: 0.1;
  width: 2em;
  height: 2em;
  display: inline-block;
  border: 1px solid black;
  border-radius: 2em;
}
.light-on {
  background-color: yellow;
  opacity: 1;
}
<div id="light" class="light"></div>
<button onclick="lightOn(true)" style="display: block;">start</button>
<button onclick="stop()" style="display: block;">stop</button>
...