jQuery.when не дожидаясь завершения

Question

Я чувствую, что я не получаю обещания этой концепции здесь. Я пытаюсь получить внешний css, используемый в файле, и добавить его в html. Тогда я хотел бы что-то сделать с этим контентом. Что я делаю здесь неправильно? Вот где я нахожусь после переполнения и чтения документов дольше, чем я хотел бы признать.

<script type="text/javascript"> 

     $(function() { 
      $.when(convertPageCssToInlineStyle()).then(
       alert(document.documentElement.outerHTML) 
      ); 


     }); 

     var convertPageCssToInlineStyle = function() { 
      var links = $("html").find("link[rel=stylesheet]"); 

      links.attr("href", function(i, value) { 
       if (!window.location.origin) 
        window.location.origin = window.location.protocol + "//" + window.location.host + value; 

       $.when(
        $.get(window.location.origin, function(response) { 
         $('<style />').text(response).appendTo($('head')); 
        }) 
       ); 

      }); 
     }; 
    </script> 

Answer 1

Функция convertPageCssToInlineStyle должна возвращать обещание. Сейчас он ничего не возвращает.

Что-то вроде этого ....

$(function() { 
     $.when(convertPageCssToInlineStyle()).then(
      alert(document.documentElement.outerHTML) 
     ); 


    }); 

    var convertPageCssToInlineStyle = function() { 
     var links = $("html").find("link[rel=stylesheet]"); 
     var deferred = $.Deferred(); 
     links.attr("href", function(i, value) { 
      if (!window.location.origin) 
       window.location.origin = window.location.protocol + "//" + window.location.host + value; 

      $.when(
       $.get(window.location.origin, function(response) { 
        $('<style />').text(response).appendTo($('head')); 
        deferred.resolve(); 
       }) 
      ); 
     }); 
     return deferred.promise(); 
    }; 
</script> 

Answer 2

Я был в состоянии решить эту проблему путем сопоставления своих обещаний в массив, а затем обработать их все сразу, используя код из This question's answer

<script type="text/javascript"> 
    $(function() { 

     var links = $("html").find("link[rel=stylesheet]"); 
     var newLinks = []; 

     if (!window.location.origin) 
      window.location.origin = window.location.protocol + "//" + window.location.host; 

     links.attr("href", function(i, value) { 
      newLinks.push(window.location.origin + value); 
     }); 

     var promises = $.map(newLinks, function(value) { 
      return $.get(value, function(response) { 
       $('<style />').text(response).appendTo($('head')); 
      }); 
     }); 

     $.when.apply($, promises).then(function() { 
      console.log(document.documentElement.outerHTML); 
     }); 
    }); 

</script>