为什么此代码无法通过其 id 更改元素的不透明度

Question

我想知道为什么当按下适当的按钮时元素的不透明度没有暂时降低。感谢您的帮助。

function sleep(miliseconds) {
  var currentTime = new Date().getTime();

  while (currentTime + miliseconds >= new Date().getTime()) {}
}

function temporarHide(ev) {
  document.getElementById(ev).style.opacity = '0.16';
  sleep(1500);
  document.getElementById(ev).style.opacity = '1';
}

<div id="epicenter">
  <img src="https://via.placeholder.com/45/000" alt="Schwarz" id="black">
  <img src="https://via.placeholder.com/45/00f" alt="Blau" id="blue">
  <img src="https://via.placeholder.com/45/0f0" alt="Grün" id="green">
  <img src="https://via.placeholder.com/45/ddd" alt="Grau" id="grey">
  <img src="https://via.placeholder.com/45/a0d" alt="Lila" id="lila">
  <img src="https://via.placeholder.com/45/e73" alt="Orange" id="orange">
  <img src="https://via.placeholder.com/45/f00" alt="Rot" id="red">
  <img src="https://via.placeholder.com/45/ff0" alt="Gelb" id="yellow">
  <img src="https://via.placeholder.com/45/fcc" alt="Rosa" id="rosa">
</div>
<button onclick="temporarHide('black')">black</button>
<button onclick="temporarHide('blue')">blue</button>
<button onclick="temporarHide('green')">green</button>
<button onclick="temporarHide('grey')">grey</button>
<button onclick="temporarHide('lila')">lila</button>
<button onclick="temporarHide('orange')">orange</button>
<button onclick="temporarHide('red')">red</button>
<button onclick="temporarHide('yellow')">yellow</button>
<button onclick="temporarHide('rosa')">rosa</button>

Answer 1

我建议使用单个事件侦听器，而不是单个事件侦听器 - 更易于维护且代码更少。我还建议使用类而不是样式标签。同样，更易于维护，但也使css transitions 之类的事情更容易。在这里，项目淡入淡出。

最后，我选择了setTimeout，而不是你的睡眠功能。 setTimeout 是完成这项工作的正确工具。如this S.O. post discusses、while()（和其他）循环阻止代码执行并持续运行直到完成。这通常对性能不利。它可能不会用这个特定的用例使浏览器崩溃，但最好坚持最佳实践。 setTimeout 和 setInterval 运行异步并仅在完成时触发。

window.addEventListener('DOMContentLoaded', () => {

  // one click-event listener to rule them all
  document.addEventListener('click', e => {

    // testing to make sure the item clicked is a button and is in the 
    // <div class='color-b'> element
    if (e.target.tagName === 'BUTTON' && e.target.closest('.color-b')) {
      let ev = e.target.innerText.trim() // get the id directly from the button text
      document.getElementById(ev).classList.add('dim');
      setTimeout(() => document.getElementById(ev).classList.remove('dim'), 1500);
    }
  })
})

img {
  transition: opacity 1s;
  width: 58px;
}

button {
  width: 58px;
}

.dim {
  opacity: 0.16;
}

<div id="epicenter">
  <img src="https://via.placeholder.com/65/000" alt="Schwarz" id="black">
  <img src="https://via.placeholder.com/65/00f" alt="Blau" id="blue">
  <img src="https://via.placeholder.com/65/0f0" alt="Grün" id="green">
  <img src="https://via.placeholder.com/65/ddd" alt="Grau" id="grey">
  <img src="https://via.placeholder.com/65/a0d" alt="Lila" id="lila">
  <img src="https://via.placeholder.com/65/e73" alt="Orange" id="orange">
  <img src="https://via.placeholder.com/65/f00" alt="Rot" id="red">
  <img src="https://via.placeholder.com/65/ff0" alt="Gelb" id="yellow">
  <img src="https://via.placeholder.com/65/fcc" alt="Rosa" id="rosa">
</div>
<div class='color-b'>
  <button>black</button>
  <button>blue</button>
  <button>green</button>
  <button>grey</button>
  <button>lila</button>
  <button>orange</button>
  <button>red</button>
  <button>yellow</button>
  <button>rosa</button>
</div>