Javascript setTimeout 不会触发延迟

Javascript setTimeout doesn't trigger a delay

本文关键字:延迟 setTimeout Javascript      更新时间:2023-09-26

我对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(( 方法上丢失 ((。但是,我怎样才能为淡出方法提供要淡出的元素呢?

提前致谢

你正在将 undefined 传递给 setTimeout ,它需要一个函数。这就是您体验这种行为的原因。您需要传递一个函数,请在此处阅读更多内容。下面的固定代码应该会有所帮助。

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);
  }     
}