javascript

Question

我有一个 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：我看过类似的问题，但所有这些超出我的能力范围（即 0）。

Answer 1

我不确定你为什么不能使用超时？这样的事情行不通吗？（您可以调整定时器...我不想等几分钟才能看到灯闪烁，所以我将它设置为几秒钟）

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>

javascript - 在触发 onlick 后定期重复操作

javascript - repeat action at regular interval after onlick has been triggered

settimeout

setinterval