延迟对象：使用嵌套循环Ajax调用完成单个Ajax调用后调用函数

Question

我有一个Ajax函数，它返回一个对象数组。然后我利用这个对象数组来指示以下每个子Ajax调用。我将子Ajax调用的结果追加到父元素创建的元素。我想使用Deferred对象并调用第三个函数，但只有在子函数和父函数中完成所有Ajax调用时才会这样。

我哪里出错了，是否有更有效的实现来实现此功能？

HTML：

<div class="out"></div>
<button id="display">display</div>
<button id="clear">clear</div>

JavaScript的：

$(document).ready(function(){

  var lib = {};

  lib.func3 = function(){

      alert("Success!  Func3 wasn't called until all Ajax calls were completed.")

  }

  lib.func2 = function(elem, userObj){

    var root = 'http://jsonplaceholder.typicode.com';
    return $.ajax({
      url: root + '/posts?userId=' + userObj.id,
      method: 'GET',
      success: function(data){
        var ol = $("<ol/>")
        $(data).each(function(i){
          var elem = $("<li/>").html(data[i].title);  
          $(ol).append(elem);
        });
        elem.append(ol);
      }
    }); 

  }

  lib.func1 = function(){    

    var func1_deferred_obj = $.Deferred();
    var func2_promises = [];

    var root = 'http://jsonplaceholder.typicode.com';
    $.ajax({
      url: root + '/users',
      method: 'GET',
      success: function(data){

        var ol = $("<ol/>");

        $(data).each(function(i){
          var elem = $("<li/>").html(data[i].name);  
          $(ol).append(elem);
          var func2_deferred_obj = lib.func2(elem, data[i])
          func2_promises.push(func2_deferred_obj);
        });

        $(".out").append(ol)

      }
    })

    $.when.apply($, func2_promises).done(function(){func1_deferred_obj.promise()})
    return func1_deferred_obj;
  }

  $("#display").click(function(){

    $(this).unbind("click");

    $.when(lib.func1()).done(function(){
      lib.func3();
      $("#display").bind('click');
    })

  })

  $("#clear").click(function(){ $(".out").empty(); })

});

CODEPEN：http://codepen.io/dclappert/pen/epBLEB?editors=101