Javascript setTimeout 不会触发延迟

Question

我对 javascript 非常陌生，并且遇到了一些奇怪的问题。 我正在尝试淡出图像，请注意，此代码尚未完成。据我所知，这应该可行。但没有。这是代码。

function changeimg() {
  var allElements = document.getElementsByClassName('picture');
  console.log(allElements.length);
  for (var i = 0; i<allElements.length;i++) {
    var opac = window.getComputedStyle(allElements[i]).opacity; 
    if (opac > 0.2) {
      fadeout(allElements[i]);
      break;
    }
  }
}

function fadeout(element) {
  console.log("reduce opacity");
  var opac2 = window.getComputedStyle(element).opacity; 
  element.style.opacity = opac2 - 0.05;
  if(opac2 > 0.2) {
    setTimeout(fadeout(element), 100);
  }     
}

这是为了找到现在可见的图像，并将其淡出。这有效，但它会立即发生。无论我给 setTimout() 方法赋予什么值，它都不会使用它，并且几乎立即完成它。

我在互联网上环顾四周，似乎我需要丢失 fadeout() 方法上的 () 。但是我怎样才能给淡出方法淡出的元素呢？

提前致谢

Answer 1

您将 undefined 传递给 setTimeout，它需要一个函数。这就是您体验这种行为的原因。你需要传递一个函数，阅读更多 here 。下面的固定代码应该有所帮助。

function changeimg() {
  var allElements = document.getElementsByClassName('picture');
  console.log(allElements.length);
  for (var i = 0; i<allElements.length;i++) {
    var opac = window.getComputedStyle(allElements[i]).opacity; 
    if (opac > 0.2) {
      fadeout(allElements[i]);
      break;
    }
  }
}

function fadeout(element) {
  console.log("reduce opacity");
  var opac2 = window.getComputedStyle(element).opacity; 
  element.style.opacity = opac2 - 0.05;
  if(opac2 > 0.2) {
    setTimeout(function() {fadeout(element);), 100);
  }     
}