javascript - HTML & JS 无限后台循环

Question

因为我对 Js 和 html 比较陌生，所以我也想循环一张背景图像，其中一个背景图像很快就会闪烁。我目前面临的问题是使整个过程陷入无限循环......

setTimeout(function ()
{
    document.body.style.backgroundImage = 'url(\'source/css/IMAGES/introInvertImage.jpg\')';
    setTimeout(function ()
    {
        document.body.style.backgroundImage = 'url(\'source/css/IMAGES/introImage.jpg\')';
    }, 300);
}, 3000);

如果我通过 for 或 while 将此代码片段放入无限循环中，它会破坏整个页面..

Answer 1

使用两个函数，这两个函数将以无限的方式相互调用。

function firstPicture() {
  document.body.style.backgroundImage = '...';

  setTimeout(function() {
    secondPicture();
  }, 3000);
}

function secondPicture() {
  document.body.style.backgroundImage = '...';

  setTimeout(function() {
    firstPicture();
  }, 300);
}

firstPicture();

<小时/>

或者在一个函数中

var pictureState = false;

function pictureChanging() {
  var timeout;

  if (pictureState) {
    document.body.style.backgroundImage = '...';

    timeout = 3000;
  } else {
    document.body.style.backgroundImage = '...';

    timeout = 300;
  }

  pictureState = !pictureState;

  setTimeout(function() {
    pictureChanging();
  }, timeout);
}

pictureChanging();