jQuery的等待狀態，直到方法執行完畢

執行的方法
需要出示彈出。

的代碼是：

$('.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 + ']'; 
}

這是一個很大的代碼。它所做的是發送一個ajax請求並接收響應。然後它處理響應並創建一個數組。這些是方法getRenditionResultset()的工作。但在我的應用程序生成數組之前，在此方法調用下的for循環也會執行show模塊。我如何等待getRenditionResultset()方法的結束，然後執行click處理程序的代碼和其餘代碼？在這種情況下有什麼辦法可以使用$.when()？此致敬禮。

來源

2012-08-31 Tapas Bose

'live'已被棄用，以支持['on']（http://api.jquery.com/on/）。 –

@arxanas，感謝您的建議，我會改變它。但是在某些情況下，我動態地替換了某個容器的內容，那麼該容器的元素就失去了綁定方法。在這種情況下，現場效果很好。 –

'on'做同樣的事情，但更一般。它可以讓你複製'live'的功能，同時讓你捕捉冒泡的事件，以及其他一些事情。 –

接受一個更多的回調作爲您的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. 
    } 
. 
. 
}

來源

2012-08-31 17:35:18

你能解釋'typeof onComplete ===函數&& onComplete（）'。 –

@TapasBose：它被稱爲*'short-circuiting「和」*「，其中第二個表達式僅在第一個表達式爲真時評估。儘管我現在已經使其更易於閱讀。 –

謝謝。代碼工作正常。我需要在「'中放置函數，否則會給出語法錯誤。 –

AJAX調用往往是異步的。因此，在執行進一步的代碼之前，必須等待完成。幸運的是，jQuery爲這樣的任務提供了一個工具：它的AJAX方法帶有一些可選的回調參數。例如，下面的代碼等待請求完成後執行：

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

來源

2012-08-31 17:35:34

您應該使用getRenditionResultSet內的AJAX成功回調至執行調用後的代碼顯示模式。

來源

2012-08-31 17:35:40

jQuery的等待狀態，直到方法執行完畢

回答

相關問題