javascript - `queue` 回调只执行一次？

Question

我有一个循环的 jQuery 函数。我想要做的是让 $bird_wing_left 元素旋转 30 度，然后旋转回 0 度(无限循环)。

$(document).ready(function() {

    var rotate = 0;

    setInterval(function(){ 

        rotate = 30;

        $bird_wing_left.css({ transform: "rotate(" + rotate + "deg)" }).delay(1000).queue(function(){
            rotate = 0;
            $(this).css({ transform: "rotate(" + rotate + "deg)" });
        });

    }, 3000);
});

它第一次确实旋转了 30 度，然后是 0 度，然后是 30 度。然而，之后，它似乎忽略了回调(将度数重置为 0)，因此，它一直保持在 30 度。

可能是什么问题？

这是 jsFiddle:https://jsfiddle.net/iamacatperson/86z26hdw/

Answer 1

当您queue 一个函数时，您必须在函数内dequeue(或调用“next”，详见下文)以允许排队继续处理(如 shown in the examples )。只需在队列回调中添加 $(this).dequeue() 即可:

var $bird_wing_left = $("#wing");
$(document).ready(function() {

  var rotate = 0;

  setInterval(function() {

    rotate = rotate + 30;

    $bird_wing_left.css({
      transform: "rotate(" + rotate + "deg)"
    }).delay(1000).queue(function() {
      rotate = rotate - 30;
      $(this).css({
        transform: "rotate(" + rotate + "deg)"
      }).dequeue();       // <====================
    });

  }, 3000);
});

body {
  padding-top: 2em;
}

<div id="wing" style="width: 10em">Bird wing</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

或者，自 jQuery 1.4 以来，queue 回调已被赋予一个参数(传统上称为 next)，它可以调用以保持队列继续:

var $bird_wing_left = $("#wing");
$(document).ready(function() {

  var rotate = 0;

  setInterval(function() {

    rotate = rotate + 30;

    $bird_wing_left.css({
      transform: "rotate(" + rotate + "deg)"
    }).delay(1000).queue(function(next) {  // <=====
      rotate = rotate - 30;
      $(this).css({
        transform: "rotate(" + rotate + "deg)"
      });
    
      next();                              // <=====
    });

  }, 3000);
});

body {
  padding-top: 2em;
}

<div id="wing" style="width: 10em">Bird wing</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

---

旁注:您可以根据需要使用 += 和 -=，例如旋转 += 30; 和 旋转 -= 30;