在Ajax成功时执行js函数

Question

我要设置要从ajax获取的图像大小。 问题是我不知道如何在成功后正常启动功能。

我的调整大小功能（当我在ajax之后从chrome开发者控制台自行启动时起作用，但在ajax之后不会自动运行）：

function resizePromiseImage(x) {
                x.success(function() {
                    var wW = window.innerWidth,
                         app = $('#app'),
                         picH = 0,
                         ratio = 0,
                         picW = app.find('img').width();

                     if( wW < picW ){
                         app.find('img').css({
                             'width':wW
                         });
                     }
                });
            }

我的ajax函数（就像我想要的那样给我图像）：

function ajax(){
                return $.ajax({
                               url: 'http://blabla.bla/bla.php',
                               success: function(data){
                                    if(data){
                                        var url = 'http://blabla.bla/bla/'+data+'.jpg',
                                            app = $('#app');

                                        app.html('<img src="'+url+'">"');

                                    }else{
                                        $('#wrap').append('pusto');
                                    }                   
                               }
                        });
            }

并执行代码：

// get a promise:
var promise = ajax();

// give a promise to other function:
resizePromiseImage(promise);

Answer 1

我建议稍微不同的方法：

function resizePromiseImage() {
  var wW = window.innerWidth,
      app = $('#app'),
      picH = 0,
      ratio = 0,
      picW = app.find('img').width();

      if( wW < picW ){
        app.find('img').css({'width':wW});
      }
});

...然后，在主要部分，只是...

var promise = ajax();
promise.done(resizePromiseImage);

现在，您正在尝试在回调函数中修改promise本身的success属性。 可能的（但以略有不同的方式：在代码中用x.done替换x.success ），但这毫无意义。

---

但是看起来实际的问题与promise无关，而是关于调整不希望工作的图像的大小。 问题实际上是由图像加载的延迟引起的：当app.find('img').width()行时， <img>元素已经在DOM中了……但是尚未获得其真实尺寸（因为图像还没有在这里）。

要解决此问题，您可能需要使用以下方法：将resizePromiseImage设置为图像加载处理程序，而不是回调加载器。 一种可能的方法是修改AJAX回调函数：

// ...
if (data){
   var url = 'http://blabla.bla/bla/'+data+'.jpg',
       $app = $('#app'),
       $img = $('<img>').load(resizePromiseImage).attr('src', url);
   $app.empty().append($img);
}
// ...

有了它，您可以修改您的缩放器功能，因此不需要对<img>其他搜索：

function resizePromiseImage() {
   var $img = $(this),
       picW = $img.width(),
   // ...
}

...换句话说，您将把这个图像引用作为其上下文（ this ）传递到函数中，并且不再需要其他查找（ app.find('img') ）。 如果执行此操作，则不再需要在promise.done上调用该函数。

Answer 2

尝试将x.success重命名为x.done。

根据jQuery文档：

弃用通知：从jQuery 1.8开始，不再使用jqXHR.success（），jqXHR.error（）和jqXHR.complete（）回调。 要准备将其最终删除的代码，请改用jqXHR.done（），jqXHR.fail（）和jqXHR.always（）。