JQuery와 대기가 나는 버튼이

Question

을 완료, 그 버튼을 클릭에 내가 필요 :

• 는
• 이 팝업을 표시해야하는 방법을 실행합니다.

코드는 다음과 같습니다

$('.dwnSingleImageLink').live('click', function(event){ 
    $('html, body').animate({scrollTop : 0}, 'slow'); 
    singleFileDownload = true; 

    var renditions = getRenditionResultset($(this).attr('data-id'), $(this).attr('data-docname')); 

    for(var i = 0; i < renditions.length; i++){ 
     var name = renditions[i].name; 
     if(name == 'Web' || name == 'Thumbnail' || name == 'Preview' || name == 'Native File'){ 
      var info = { 
       name: renditions[i].name, 
       fileSize: renditions[i].fileSize, 
       width: renditions[i].width, 
       height: renditions[i].height, 
       label: '' 
      }; 
      renditionInfos.push(info); 
     } 
    } 

    $('#downloadModal').find('input:hidden').attr({ 
      'data-id': $(this).attr('data-id'), 
      'data-docname': $(this).attr('data-docname'), 
      'data-title': $(this).attr('data-title') 
    }).after(function(){    
     $('#downloadModal').modal('show').css({ 
      width: '380px', 
      'margin-left': function() { 
       return - ($(this).width()/2); 
      } 
     }); 
    }); 
}); 

var getRenditionResultset = function(dID, dDocName){ 
    var submitData = { 
     IdcService: 'RENDITION_INFO', 
     dID: dID, 
     dDocName: dDocName 
    }; 

    var renditions = new Array(); 
    var fields = new Array(); 

    $.ucm.executeServiceIsJson(submitData, function(ucmResponse) { 
     var resultSet = ucmResponse.ResultSets['manifest']; 
     alert('jym');         

     for (var fieldIndex = 0; fieldIndex < resultSet.fields.length; fieldIndex++) { 
      var field = new RenditionField(); 
      field.name = resultSet.fields[fieldIndex].name; 
      field.index = fieldIndex; 

      fields.push(field); 
     } 

     for(var rowIndex = 0; rowIndex < resultSet.rows.length; rowIndex++) { 
      var rendition = new Rendition(); 

      for(var i = 0; i < fields.length; i++){ 
       var value = resultSet.rows[rowIndex][fields[i].index];     

       switch(fields[i].name){ 
        case 'extRenditionName' : 
         rendition.name = value; 
         break; 
        case 'extRenditionDescription' : 
         rendition.description = value; 
         break; 
        case 'extRenditionPath' : 
         rendition.path = value; 
         break; 
        case 'extRenditionOriginalName' : 
         rendition.originalName = value; 
         break; 
        case 'extRenditionParams' : 
         rendition.params = value; 
         break; 
        case 'extRenditionType' : 
         rendition.type = value; 
         break; 
        case 'extRenditionFileSize' : 
         rendition.fileSize = value; 
         break; 
        case 'extRenditionWidth' : 
         rendition.width = value; 
         break; 
        case 'extRenditionHeight' : 
         rendition.height = value; 
         break; 
        case 'extRenditionFileType' : 
         rendition.fileType = value; 
         break; 
        case 'extRenditionPixelsPerInchVertical' : 
         rendition.pixelsPerInchVertical = value; 
         break; 
        case 'extRenditionPixelsPerInchHorizontal' : 
         rendition.pixelsPerInchHorizontal = value; 
         break; 
        case 'extRenditionColours' : 
         rendition.colours = value; 
         break;   

       }     
      } 

      renditions.push(rendition); 
     } 
    }); 

    return renditions; 
} 

function RenditionField() { 
    this.name = ''; 
    this.index = -1; 
} 

function Rendition() { 
    this.name = ''; 
    this.description = ''; 
    this.path = ''; 
    this.originalName = ''; 
    this.params = ''; 
    this.type = ''; 
    this.fileSize = ''; 
    this.width = ''; 
    this.height = ''; 
    this.fileType = ''; 
    this.pixelsPerInchVertical = ''; 
    this.pixelsPerInchHorizontal = ''; 
    this.colours = ''; 
} 

Rendition.prototype.toString = function() { 
    return '[object Rendition: name=' + this.name + ';description=' + this.description + ';path=' + this.path + ';originalName=' + this.originalName + 
    ';params=' + this.params + ';type=' + this.type + ';fileSize=' + this.fileSize + ';width=' + this.width + ';height=' + this.height + ';fileType=' + 
    this.fileType + ';pixelsPerInchVertical=' + this.pixelsPerInchVertical + ';pixelsPerInchHorizontal=' + this.pixelsPerInchHorizontal + ';colours=' + 
    this.colours + ']'; 
} 

그것은 큰 코드입니다. 그것이하는 일은 아약스 요청을 보내고 응답을받는 것입니다. 그런 다음 응답을 처리하고 배열을 만듭니다. 이것들은 방법 getRenditionResultset()의 작업입니다. 그러나 배열을 생성하기 전에 내 응용 프로그램에서이 메서드를 호출하면 for 루프가 show modal 블록을 실행합니다. getRenditionResultset() 메서드의 끝을 기다린 다음 for 및 click 처리기의 나머지 코드를 어떻게 실행합니까? 이 경우 $.when()을 사용할 수 있습니까? 감사합니다.

Answer 1

당신의 getRenditionResultset 메서드에 매개 변수로 또 하나의 콜백을 수락합니다. 호출의 시점에서

var getRenditionResultset = function(dID, dDocName, onComplete){ 

    $.ucm.executeServiceIsJson(submitData, function(ucmResponse) { 
    //after creating the array with the reponse 

    if(typeof onComplete === function){ 
     onComplete() 
    } 


    } 
} 

는

$('.dwnSingleImageLink').on('click', function(event){ 
. 
. 
    var renditions = getRenditionResultset(blah, blah, function(){ 
     //code to execute after request has completed. 
    } 
. 
. 
} 

Answer 2

AJAX 호출이 비동기 경향 않습니다. 따라서 추가 코드를 실행하기 전에 완료 될 때까지 기다려야합니다. 다행히 jQuery는 이러한 작업을위한 기능을 제공합니다. AJAX 메소드는 선택적 콜백 매개 변수를 사용합니다. 예를 들어, 다음 코드는 완료 요청에 대해 대기 후 실행 :

$.ajax({ 
    "url": "http://example.com/ajax.php", 
    "type": "post", 
    "dataType": "json", 
    "success": function(data) { 
     // data is a json-decoded object. 
    } 
}); 

Answer 3

당신은 모달 표시 후 전화 코드를 실행하기 위해 getRenditionResultSet 내에서 AJAX 성공 콜백을 사용해야합니다.