javascript - 延迟 jQuery.each 结果

标签 javascript jquery jquery-deferred

我正在学习延期,但无法弄清楚它是如何/为什么起作用的:

<html>
<head>
</head>
<body>
    <div>
        1</div>
    <div>
        2</div>
    <div>
        3</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
        $("div").each(function (i) {
            $(this).delay(1000 * i).fadeOut();
        }).promise().done(function () { console.log("it's done"); });
</script>
</body>
</html>

特别是:为什么我可以在每个之后调用 promise?为什么它在技术上是可行的? 我已经 console.logged:

console.log($("div").each(function (i) {}));

我确实在原型(prototype)中看到了 promise 方法。但是,我的每个函数都不返回任何值,只有一个:

$(this).delay(1000 * i).fadeOut();

那么 promise 如何与动画结果相关联呢? (基本上每次迭代的结果)

编辑 1:为了清楚起见,也许我应该这样写我的问题:

在所有动画完成后如何调用done 方法 == 如何将 promise 与在每个回调函数内执行的动画互连。

最佳答案

我从未见过 each 与 promises 一起使用,但只有动画

$('div') 
.animate({opacity: 0}, 1500) // animate all divs at once
.promise()
.done(function(){ 
   console.log('all done');
});

这将立即为所有 div 设置动画,然后在所有 div 完成动画后执行回调。 循环内动画的问题在于它无法协调,如果您不使用 promise ,您将无法控制它们何时全部完成。如果你真的想使用 each,你必须创建一个 promises 数组,然后使用 then

 var promises = [];
 $('div').each(function(){
    var $this = $(this);
    promises.push($this.fadeOut('slow').promise());
 });

 $.when.apply($, promises).then(function(){
   console.log('all done');
 });

这与执行 $('div').fadeOut('slow', function(){ alert('done'); }); 不同,因为会发生回调对于每个动画元素,而 promises 就像是一个包含许多子任务的“任务”

http://jsfiddle.net/LbHrQ/3/

promises 的最佳用途是当你想要同步一些天生的异步操作时,比如动画、ajax、使用超时的东西(在这种情况下,你需要手动 resolve() 你的 Deferred )

关于javascript - 延迟 jQuery.each 结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14415154/

相关文章:

javascript - 您如何设计单个 JQuery 自动完成小部件的样式?

javascript - 如何停止用鼠标滚动时相对放置的元素的抖动?

javascript - 收到 AJAX 内容时 $.each 的下一次迭代

javascript - 当我将鼠标悬停在图像上时,我需要使用 JavaScript 更改图像的不透明度值,但我的代码无法正常工作

javascript - 如何将参数传递给 jQuery $.getJSON 回调方法?

javascript - 我想让用户输入更改链接

jQuery 对象和 form.serialize

javascript - 如果与同步函数一起使用,deferred 会阻塞 UI 吗?

JavaScript Promise 卡在 resolve 上

javascript - 如何留在 jquery DataTable 中的事件页面