标签: jquery-deferred

我想只在jQuery对象中的所有图像都已加载时执行一些代码.我可以这样做:

var img1Load = $.Deferred();
$('#img1').load(img1Load.resolve);

var img2Load = $.Deferred();
$('#img2').load(img2Load.resolve);

$.when(img1Load, img2Load).done(function(){
    console.log('both imgs loaded');
});

这没关系,但我不想为每个图像定义一个单独的延迟对象.如果有数百个或者某个页面上是否有或不存在该怎么办？我想一次完成所有这些,例如:

$.when(allImagesHaveLoaded).done(function(){
    console.log('all imgs loaded');
});

我尝试创建一个allImagesHaveLoaded迭代图像的函数,为每个图像创建一个新的延迟对象.麻烦的是,如果我返回一个这样的数组用作when的参数,它就不起作用(因为它不是延迟对象,它是一个延迟对象的数组).

我也$.Deferred.pipe有点摆弄(尝试创建一个链接的延迟对象传递给when),但这似乎没有帮助.

这样做有明智的方法吗？

我有一个jQuery延迟,我解析如下:

deferredAction.resolve(returnArray);

这是一个回调,如:

function someCallback(myArray) {
...
}

这很好用,回调函数接收数组.但是我需要设置回调函数的上下文,所以我使用了deferred.resolveWith,如下所示:

deferredAction.resolveWith(someContext, returnArray);

现在正确设置上下文.但是,现在好像returnArray被拆分了. 我的回调只接收数组的第一项.

为什么会发生这种情况,我该如何解决这个问题？

我正在使用Knockout.js显示从我的服务器返回的搜索结果列表.结果集中的每个结果都包含一个图像.我正在尝试将处理程序附加到每个图像的加载事件,因此我可以根据所有图像的最大高度调整图像的父div,但加载事件似乎在图像加载完成之前触发.

此外,我可以看到加载处理程序在firebug中命中,但调试行为只是给图像加载时间,所以一切都在调试时正常工作.

我的viewModel中的加载处理程序:这会将已解析的延迟推送到我的promises数组中.然后,我所要做的就是检查以确保阵列已满,这将告诉我图像已加载.

self.imageLoadHandler = function() {
    var promise = $.Deferred().resolve;
    promises.push(promise);
};

负载处理程序的绑定

<img data-bind="attr: { src: Posters.Detailed, alt: Title }, event: { load: $root.imageLoadHandler }" />

我的viewModel中的搜索函数:这将返回json结果,填充我的observable数组,然后通过首先检查以确保promises数组已满,然后何时获取最大高度并设置每个"thumbnail"的高度.所有"缩略图"到那个高度.

self.search = function () {
    $.getJSON(arguments[0].action, { name: this.searchValue() }, function (data) {
        self.movies(data);
        setThumbnailHeight();
    });
};

var setThumbnailHeight = function() {
    var $items = $('.thumbnails li');
    $.when.apply($, promises).done(function() {
        var maxHeight = Math.max.apply(null, $items.map(function () {
            return $(this).height();
        }).get());
        $items.css('height', maxHeight);
    });
};

我的问题是:为什么加载事件在图像加载之前触发,如何在适当的时间触发加载事件？

UPDATE

我的想法是,加载事件可能会过早地触发,因为它可能是在图像出现之后附加的src …

最近我询问了如何触发可变数量的jquery get()请求,并且我收到了这段代码作为一个非常有效的工作解决方案:

var d = new $.Deferred();
var promise = d.promise();
var results = [];
for (var i = 0; i < 5; i++) {
    (function(i) {
        promise = promise.then(function() {
            return $.ajax('/echo/json/', {
                data: {
                    json: JSON.stringify({foo: i})
                }
            }).done(function(data) {
                results[i] = data;
            });
        });
    }(i));
}

promise.done(function() {
    console.log(results);
});

d.resolve(); 

小提琴

我正在寻找一个解释,它是如何与done()每个附加的多个s一起工作的promise.then(),然后最终done()附加到promise本身.这是一个承诺(从我所理解的是一种特殊类型的延迟本身)可以完成,那么延期本身也可以完成吗？如果它不在循环中,那么这个语法会是什么样的,例如,连续三个ajax请求？试着试着理解它.谢谢!

假设我有一个基本的哑巴javascript类:

var FunctionX = function(configs) {
this.funcConfigs = configs;
}

FunctionX.prototype.getData = function() {
  return $.get('/url');
}

FunctionX.prototype.show = function(promise) {
  console.log(this.funcConfigs); // <-- this here is the promise itself, I'm looking to get the instance's configs
}

FunctionX.prototype.setup = function() {
  this.GetData().then(show);
}

var f = new FunctionX({ "a": "b" });
f.setup();

现在我在show函数中尝试访问实例变量"funcConfig"."这"是承诺,"funcConfigs"直接返回undefined.

我尝试用a来解决这个问题,.resolveWith(this)但它没有解决这个问题.

如何在此范围上下文中访问实例变量？

不久前,SO用户为我编写了这个函数,以返回可变数量的jQuery $.get()请求.第一部分是非常简单的,但是会有人elplain如何$.when(),apply()以及$.done()在互动.我一般不了解,但非常具体地说他们是如何访问$.get()返回的延迟对象.

function getHTML(qty_of_gets) {

   var dfdArr = [],
       i = 1;

   while (i <= qty_of_gets) {
       dfdArr.push($.get("get_test_" + i + ".php"));
       i++;
   }

   $.when.apply(null, dfdArr).done(function () {

       for (var i = 0; i < arguments.length; i++) {

           $("#content").append(arguments[i][0]);

       }

   });
}

http://promisesaplus.com/

最后,核心Promises/A +规范没有涉及如何创建,实现或拒绝承诺,而是选择专注于提供可互操作的方法.配套规范中的未来工作可能涉及这些主题.

作为一个功能开发人员,我通常会处理monad和operator之类的操作,point bind map或者flatMap链接一些包含在monad框内的调用.

根据这个问题的js递延/无极/未来相比,比如Scala函数式语言,在map和flatMap运营商似乎在融化在一起then的JS规范,可能是因为它不会赚那么多有意义的像的JS动态类型语言同时提供(？)并且使用和记住单个操作符更方便.

到目前为止一直很好,有一个then运营商(似乎并不总是正确实施)

但为什么承诺创建/履行/拒绝不是规范的一部分？这就像只有半个monad :( 似乎我不是唯一抱怨的人

通常,我的问题是:

• 我想创建一个JS库
• 我想公开一个基于promise的API
• 我希望客户端选择他想要使用的promise实现

那我该怎么办？

我可以在我的图书馆里创建承诺

Q.fcall(function () {
    return 10;
})

好的很酷,我只是将我的库耦合到Q :(

那么,这个问题有什么解决方案吗？库作者如何创建他暴露给API的承诺而不与实现相结合？

是否有一些免许可证的最低可行承诺A +库可以嵌入我们的库或其他东西？

这个规格选择背后的原因是什么？

我正在尝试为以下方案创建一个javascript对象

一项调查采访了多人关于他们在几顿饭中消费的食物.该对象需要嵌套如下: -

case={}
case[x].Interview={}
case[x].Interview[y].meals={}
case[x].Interview[y].meals[z].Food=[]

我通过以下代码实现了这一点

var $caseoffset=0
loadcases()
function loadcases() {
    $.ajax({
        url: "functions.php",data: {offset: $caseoffset,method: "getCase"},method: "post",dataType: 'json',
        success: function(result) {
            cases = result;
            loadinterview(cases[$caseoffset].fldCaseID)         
        }
    })  
}

function loadinterview($CaseID) {
    $.ajax({
        url: "functions.php",
        data: {method: "getinterview",caseid: $CaseID}, method: "post",dataType: 'json',
        success: function(result) {
            thiscase=cases[$caseoffset]
            thiscase.interviewcount=result.length
            thiscase.interviews={}

            $.each(result,function(key,val){
                thiscase.interviews[val.fldInterviewID]=val
                loadmeals(val.fldInterviewID)
            })  
        }    
    })
}
function loadmeals($InterviewID) {
    $.ajax({
        url: "functions.php",
        data: {method: "getmeal",InterviewID: $InterviewID},method: "post",dataType: 'json',
        success: function(result) {
            thiscase.interviews[parseInt($InterviewID)].mealcount = result.length
            thiscase.interviews[parseInt($InterviewID)].meals={}

            $.each(result, function(key, val) …

在我的骨干应用程序中,我加载3个集合,并在渲染功能中绑定"重置"事件.因此,通过这种方式,当我获取集合时,我会打印各种结果,但不能同时打印.

我会使用jquery延迟方法($ .when,$ .then)同时打印所有内容,如果我在视图上使用"绑定事件",如何执行此操作？

这是代码:

路由器:

App.Routers.test1 = Backbone.Router.extend({  

    routes: {       
        "/test" : "test"        
    },

    initialize: function() {                            
        // Models
        this.Models_1 =     new App.Collections.coll_1;     
        this.Models_2 =     new App.Collections.coll_2;
        this.Models_3 =     new App.Collections.coll_3;

        // Views
        this.View_1 =       new App.Views.view_1( {model: this.Models_1} );
        this.View_2 =       new App.Views.view_2( {model: this.Models_2} );
        this.View_3 =       new App.Views.view_3( {model: this.Models_3} );         
    },

    test: function() { 
        $.when(

            this.Models_1.fetch(),
            this.Models_2.fetch(),
            this.Models_3.fetch()

        ).then(function() {

            // ?????????????????????????

            //  What should I do here?

            // ?????????????????????????

        });
    }

});

查看1:

App.Views.view_1 …

我尝试使用$.whenajax调用,其中调用的调用并不总是被调用,我怎样才能实现这一点.我一直试图破解它

var renderThis;
$.when($.post("/blabla", function(data){
            renderThis = data;
        }),
        function(){
            if(another){
                return $.post("/blabla");
            }
            else{
                return true;
            }
        })
        .then(function(){
            render(renderThis)
        });

但我所看到的是,$.then()不是以延迟的方式调用,而是立即调用.

有任何想法吗？