承诺与ajax

Question

我现在有了这段代码，在那里我获得了页面所需的所有模板。

问题在于，每次加载页面时，ajax请求都不会以相同的顺序完成。

有没有办法使用promises或其他东西，以便加载顺序始终保持不变？
感谢。

var loadTemplates = function (templatesObject) {
    $.each(templatesObject.template, function (index, template) {
        template.callback = template.callback || $.noop;

        $.ajax({
            url: template.url,
            success: function(html) {
                var compiledHtml = Handlebars.compile(html);
                var output = compiledHtml(template.data);
                $(template.target).append(output);
                template.callback();
            }
        });
    });
};

编辑：这是我的对象的样子，具有不同数量的模板，在这个实例中只有2个。

templatesObject

var templates = {
    template: [
        {
            url: 'firsturl',
            target: '#page-content'
        },
        {
            url: 'myurl',
            target: '#page-content',
            data: data,
            callback: awesomefunction
        }
    ]
};

Answer 1

你可以使用$ .ajax返回一个promise，使用$ .map而不是$ .each，然后使用$ .when等待所有ajax完成，并在成功回调中执行的操作$ .when（）。然后回调......

<script>
        function print_font()
        {
            var content = document.getElementById('Pcontent').innerHTML;
            var win = window.open();
            win.document.write(content);
            win.document.body.style.fontFamily="Impact, Charcoal, sans-serif";  
            win.print(); 

        }
    </script>

 <div id="Pcontent">

        <p>Print Me according to your font choice... </p>
    </div>
    <br>
    <br>
    <a href="#" onClick="print_font()" >Print</a>