아약스 성공시 js 함수를 실행하십시오.

Question

아약스에서 받아 들일 이미지의 크기를 설정해야합니다. 문제는 성공 후 exacly 함수를 실행하는 법을 모른다.

내 크기 조정 기능 (작동하는 나는 아약스 후 크롬 dev에 콘솔에서 자신에 의해 발생하지만, 아약스 후를 automaticly 가지 않을 때) : 그냥처럼 나에게 이미지를 제공합니다

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); 

는 당신이 지금하는 콜백 함수 내에서 약속 자체의 success 속성을 수정하기 위해 노력하고있다. 가능합니다 (그러나 약간 다른 방식으로 코드에서 을 x.done으로 바꾸십시오).하지만 의미가 없습니다.

---

는하지만 실제 문제에 대한 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를 문서에 따르면

:

중단주의 사항 : jqXHR.success(), jqXHR.error() 및 jqXHR.complete() 콜백은 jQuery를 1.8로 사용되지 않습니다. 코드를 제거하기 위해 코드를 준비하려면 jqXHR.done(), jqXHR.fail(), 및 jqXHR.always()를 대신 사용하십시오.