運行后如何重復JavaScript函式？

我正在使用 CSS/JavaSript 來旋轉一個立方體，問題是當我運行腳本時它會同時遍歷所有面。我的解決方案是使用 setTimeout() 來允許每個 CSS 影片運行。這對第 6 次很有用，但在那之后它就停止了，因為函式中只有 6 次迭代。完成后如何讓此功能重復？

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>

uj5u.com熱心網友回復：

您可以使函式遞回。這樣，它本身就會無限回圈。您必須在遞回發生之前添加一個超時，否則您會堆疊很多 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>

uj5u.com熱心網友回復：

只需spinMe()從最后一個呼叫遞回函式setTimeout

標籤：javascript jQuery css 动画片

上一篇：在另一個動態添加的<select>中啟用和禁用特定選項

下一篇：在Javascript中添加額外的查詢引數，同時保留原始URL