' queue '回调只执行一次

`queue` callback only executes once?

本文关键字：一次 queue 回调 执行      更新时间：2023-09-26

我有一个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/

当您queue一个函数时，在该函数内您必须dequeue(或调用" next "，后面有更多)以允许队列继续处理(如示例所示)。只需在您的队列回调中添加$(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;

可以在设置变量值之前检查旋转变量值

if(rotate  == 0)
  rotate = rotate + 30;
else 
  rotate = 0;
相关文章：