' queue '回调只执行一次
`queue` callback only executes once?
我有一个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;
相关文章:
- Javascript返回值只在循环中返回一次
- Jquery FadeIn FadeOut 只工作一次
- Javascript html每点击一次就会更改url
- 如何在chrome扩展中存储数据/结果,以及如何使用setTimeout使其只被调用一次
- Rails操作只调用一次,但我在ajax中每秒钟都调用一次
- jQuery滚动功能只工作一次
- 刷新导致我的帖子“;张贴“;再一次
- 引导程序崩溃一次只能看到一个
- 有没有一个抽象层,这样我就可以集成一次,然后使用pusher、pubnub或faye
- 加载器组件仅加载一次
- 根据Angular.JS上一次的内容禁用选择
- 一次又一次地在新的和相同的选项卡中打开一个url
- 只在宽度以下和宽度以上各准备一次
- 如果30秒未单击,请应用CSS一次,将其删除,然后重新迭代
- Angularjs:空对象,当只有一次点击时
- 在Angular应用程序中每个帖子投票一次
- 主干模型更改事件只触发一次
- 使用每500ms运行一次的jquery函数是个好主意吗
- Jquery Queue请求集成一次First Request Success,然后调用下一个请求
- ' queue '回调只执行一次