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（）方法中丢失（）。但是我怎么能给fadeout方法提供淡出的元素呢？

提前致谢

Answer 1

您正在将未定义传递给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);
  }     
}

Javascript setTimeout不会触发延迟

1 个答案: