2012-08-31 29 views
1

我有一个按钮,在单击该按钮,我需要: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()? 此致敬礼。

+3

'live'已被弃用,以支持['on'](http://api.jquery.com/on/)。 –

+0

@arxanas,感谢您的建议,我会改变它。但是在某些情况下,我动态地替换了某个容器的内容,那么该容器的元素就失去了绑定方法。在这种情况下,现场效果很好。 –

+2

'on'做同样的事情,但更一般。它可以让你复制'live'的功能,同时让你捕捉冒泡的事件,以及其他一些事情。 –

回答

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. 
    } 
. 
. 
} 
+0

你能解释'typeof onComplete ===函数&& onComplete()'。 –

+0

@TapasBose:它被称为*'short-circuiting“和”*“,其中第二个表达式仅在第一个表达式为真时评估。尽管我现在已经使其更易于阅读。 –

+0

谢谢。代码工作正常。我需要在“'中放置函数,否则会给出语法错误。 –

0

AJAX调用往往是异步的。因此,在执行进一步的代码之前,必须等待完成。幸运的是,jQuery为这样的任务提供了一个工具:它的AJAX方法带有一些可选的回调参数。例如,下面的代码等待请求完成后执行:

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

您应该使用getRenditionResultSet内的AJAX成功回调至执行调用后的代码显示模式。