jQuery.when 没有等待 get 完成

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 函数必须 return 一个承诺。现在 return 什么都没有。

像这样....

    $(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>

jQuery.when 没有等待 get 完成

jQuery.when not waiting for get to complete

jquery

promise