`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

快速修复可以是在设置之前检查旋转变量值。

if(rotate  == 0)
  rotate = rotate + 30;
else 
  rotate = 0;

Answer 2

当您 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>

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

`queue` 回调只执行一次？

`queue` callback only executes once?

javascript

css

jquery

callback

jquery-callback