Question

我有一个隐藏和显示div的功能。

如何设置它，当函数完成运行时，它应该重新启动？

function rotateimages() {
  setTimeout(function() {
    restoreOriginal()
    $('.main2').css('background-image', 'url(/img/2017/home_main_vacation.gif)');
  }, 3500);
  setTimeout(function() {
    restoreOriginal()
    $('.main5').css('background-image', 'url(/img/2017/home_main_tickets.gif)');
  }, 12500);
}

Answer 1

如果您的目标是永久地在两个图像之间交替，最简单的解决方案就是在第二次超时结束时从自身调用该函数。正如I wrestled a bear once所述，这是一个称为递归的原则。

function rotateimages() {
  setTimeout(function() {
    restoreOriginal()
    $('.main2').css('background-image', 'url(/img/2017/home_main_vacation.gif)');
  }, 3500);
  setTimeout(function() {
    restoreOriginal()
    $('.main5').css('background-image', 'url(/img/2017/home_main_tickets.gif)');
    rotateimages()//<<<<<<<<<<<<<<<<<<<<<<Recurse here!
  }, 12500);
}

这样，您的rotateimages函数将每12.5秒调用一次。所以你的行为将等待3.5秒，显示main_vacation，等待9秒，显示main_tickets并回忆。永远重复。

如果您只想重复几次，可以设置计数器等，并将递归函数调用放在条件中。

Answer 2

您可以使用css animation，transition来呈现预期结果。

.main2, .main5 {
  display: block;
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
}

.main2 {
  transition: background-image 3.5s ease-in-out;
  animation: main2 3.5s ease-in-out infinite alternate;
}

.main5 {
  transition: background-image 12.5s ease-in-out;
  animation: main5 12.5s ease-in-out infinite alternate;
}

@keyframes main2 {
  from {
    background-image: url(http://lorempixel.com/100/100/cats);
  }
  to {
    background-image: url(http://lorempixel.com/100/100/technics);
  }
}

@keyframes main5 {
  from {
    background-image: url(http://lorempixel.com/100/100/city);
  }
  to {
    background-image: url(http://lorempixel.com/100/100/nature);
  }
}

<div class="main2"></div>
<br>
<div class="main5"></div>

完成后重复一个功能

2 个答案: