Question

我想使用javascript制作一个3d立方体的动画。我已经制作了它所需要的方法。就像转动它一样。但是为了给它们设置动画，我以2000的间隔添加了setTimeout（）函数。

Opps！这里有很多setTimeout函数！

有没有办法可以创建一个方法来简单地运行下一个代码...... ??? 喜欢这个!!!

$（＆＃34; .cube .box＆＃34;）。转（＆＃34;右＆＃34;）。等待（2000）。转（＆＃34;返回＆＃34;）。等待（300）.turn（＆＃34;左＆＃34）

简单但有效!!! ： - ）

setTimeout(function() {
        $(".cube .box").turn("right");
        setTimeout(function() {
            $(".cube .box").turn("back");
            setTimeout(function() {
                $(".cube .box").turn("left");
                setTimeout(function() {
                    $(".cube .box").turn("top");
                    setTimeout(function() {
                        $(".cube .box").turn("bottom");
                        setTimeout(function() {
                            $(".cube .box").turn("front");
                        }, 2000);
                    }, 2000);
                }, 2000);
            }, 2000);
        }, 2000);
    }, 2000);

Answer 1

 const directions = ["right", "back", "left", "top", "bottom", "front"]

 function turn(i = 0){
   if(i >= directions.length) return;
   $(".cube .box").turn(directions[i]);
   setTimeout(turn, 2000, i + 1);
 }

 //Start
 setTimeout(turn, 2000);

只需使用间接递归函数迭代所有转弯。

或使用jquerys delay

$(".cube .box")
  .delay(2000)
  .turn("right")
  .delay(2000)
  .turn("back")
  .delay(2000)
  .turn("left")
  .delay(2000)
  .turn("top")
  .delay(2000)
  .turn("bottom")
  .delay(2000)
  .turn("front")

可以简化为：

 ["right", "back", "left", "top", "bottom", "front"].reduce(
   (chain, turn) => chain.delay(2000).turn(turn),
   $(".cube .box")
 );

很多setTimeout（） - 如何收缩？

1 个答案: