如何在运行之后重复 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

的递归函数

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

How can I repeat a JavaScript function after it's ran?

javascript

css

jquery

animation

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

How can I repeat a JavaScript function after it's ran?

javascript

css

jquery

animation

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