在运行JavaScript函数之后，我如何重复它？

Question

我正在使用CSS/JavaSript旋转一个立方体，问题是当我运行脚本时，它会同时遍历各个方面。我的解决方案是使用setTimeout()来允许每个CSS动画运行。这对于前六个非常有用，但是在那之后它就停止了，因为函数中只有六个迭代。一旦它完成，我如何才能让这个函数重复呢？

​

function spinMe() {

  $('.cube').removeClass('show-top');
  $('.cube').addClass('show-bottom');

  setTimeout(function() {
    $('.cube').removeClass('show-bottom');
    $('.cube').addClass('show-left');
  }, 1000);


  setTimeout(function() {
    $('.cube').removeClass('show-left');
    $('.cube').addClass('show-back');
  }, 4000);


  setTimeout(function() {
    $('.cube').removeClass('show-back');
    $('.cube').addClass('show-right');
  }, 7000);

  setTimeout(function() {
    $('.cube').removeClass('show-right');
    $('.cube').addClass('show-top');
  }, 10000);

}


jQuery(document).ready(function() {

  spinMe();

});

.cube.show-front {
  transform: translateZ(-100px) rotateY( 0deg);
}

.cube.show-right {
  transform: translateZ(-100px) rotateY( -90deg);
}

.cube.show-back {
  transform: translateZ(-100px) rotateY(-180deg);
}

.cube.show-left {
  transform: translateZ(-100px) rotateY( 90deg);
}

.cube.show-top {
  transform: translateZ(-100px) rotateX( -90deg);
}

.cube.show-bottom {
  transform: translateZ(-100px) rotateX( 90deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scene">
  <div class="cube">
    <div class="cube__face cube__face--front">Front</div>
    <div class="cube__face cube__face--back">Back</div>
    <div class="cube__face cube__face--right">Right</div>
    <div class="cube__face cube__face--left">Left</div>
    <div class="cube__face cube__face--top">Top</div>
    <div class="cube__face cube__face--bottom">Bottom</div>
  </div>
</div>

​

Answer 1

您可以使函数递归。这样，它本身就会无限循环。您必须在递归发生之前添加一个超时，否则会堆叠很多setTimeout函数，我认为浏览器不会喜欢这样的。

例如，您可以：

​

function spinMe() {

  $('.cube').removeClass('show-top');
  $('.cube').addClass('show-bottom');

  setTimeout(function() {
    $('.cube').removeClass('show-bottom');
    $('.cube').addClass('show-left');
  }, 1000);


  setTimeout(function() {
    $('.cube').removeClass('show-left');
    $('.cube').addClass('show-back');
  }, 4000);


  setTimeout(function() {
    $('.cube').removeClass('show-back');
    $('.cube').addClass('show-right');
  }, 7000);

  setTimeout(function() {
    $('.cube').removeClass('show-right');
    $('.cube').addClass('show-top');
  }, 10000);

  setTimeout(function() {
    spinMe();
  }, 13000);
}


jQuery(document).ready(function() {

  spinMe();

});

.cube.show-front {
  transform: translateZ(-100px) rotateY( 0deg);
}

.cube.show-right {
  transform: translateZ(-100px) rotateY( -90deg);
}

.cube.show-back {
  transform: translateZ(-100px) rotateY(-180deg);
}

.cube.show-left {
  transform: translateZ(-100px) rotateY( 90deg);
}

.cube.show-top {
  transform: translateZ(-100px) rotateX( -90deg);
}

.cube.show-bottom {
  transform: translateZ(-100px) rotateX( 90deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scene">
  <div class="cube">
    <div class="cube__face cube__face--front">Front</div>
    <div class="cube__face cube__face--back">Back</div>
    <div class="cube__face cube__face--right">Right</div>
    <div class="cube__face cube__face--left">Left</div>
    <div class="cube__face cube__face--top">Top</div>
    <div class="cube__face cube__face--bottom">Bottom</div>
  </div>
</div>

​

Answer 2

只需调用spinMe()作为递归函数从您的上一个setTimeout