Javascript 将deferred.resolve从函数内部的操作移动到整个函数完成

当我将所有svg移到画布之后将deferred.resolve移到外部时，我并没有让整个函数在deferred.resolve中工作。我希望在所有svg转换为画布而不仅仅是第一个svg时执行deferred.promise（）

$(document).ready(function() {

    $( '#save_dashboard' ).click(function() {

        // Create a deferred object
        var dfd = new $.Deferred();

        // https://github.com/niklasvh/html2canvas/issues/95#issuecomment-45114424
        // First render all SVGs to canvases
        targetElem = $('#dashboard');

        var elements = targetElem.find('svg').map(function() {
            var svg = $(this);
            var canvas = $('<canvas></canvas>');
            svg.replaceWith(canvas);

            // Get the raw SVG string and curate it
            var content = svg.wrap('<p></p>').parent().html();
            content = content.replace(/xlink:title='hide\/show'/g, '');
            content = encodeURIComponent(content);
            svg.unwrap();

            // Create an image from the svg
            var image = new Image();
            image.src = 'data:image/svg+xml,' + content;
            image.onload = function() {
                canvas[0].width = image.width;
                canvas[0].height = image.height;

                // Render the image to the canvas
                var context = canvas[0].getContext('2d');
                dfd.resolve(context.drawImage(image, 0, 0));
            };

            return dfd.promise();
            /* return {
                svg: svg,
                canvas: canvas
            }; */
        }); // end of targetElem.find('svg').map(function() {...});

        // $.when(dfd).done(function(){
        //    console.log('dfd done');
        dfd.then(function(_canvas){
            console.log('dfd done', _canvas);

            // http://www.kubilayerdogan.net/html2canvas-take-screenshot-of-web-page-and-save-it-to-server-javascript-and-php/
            $('#dashboard').html2canvas({
                onrendered: function (canvas) {
                    //Set hidden field's value to image data (base-64 string)
                    var dashboardPng = canvas.toDataURL('image/png');
                    console.log('dashboardPng: ' + dashboardPng);

                    $.ajax({
                        url:'save_dashboard_image.php',
                        data:{dashboardPngData: dashboardPng},
                        type:'POST',
                        dataType:'json',
                        success: function(){
                            console.log('success');
                        }
                        ,
                        error: function(xhr, status, error){
                            console.log('The requested page was: ' + document.URL +
                                '. The error number returned was: ' + xhr.status +
                                '. The error message was: ' + error);
                        }
                    });
                }
            });
        // }); // end of when(dfd).done()
        }); // end of dfd.then(function(_canvas){...})

    }); // end of save_dashboard click function
}); // end of document ready

$（文档）.ready（函数（）{
$（“#保存仪表板”）。单击（函数（）{
//创建延迟对象
var dfd=新的$.Deferred（）；
// https://github.com/niklasvh/html2canvas/issues/95#issuecomment-45114424
//首先将所有SVG渲染到画布
targetElem=$（“#仪表板”）；
var elements=targetElem.find（'svg'）.map（函数（）{
var svg=$（这是）；
变量画布=$（''）；
替换为（画布）；
//获取原始SVG字符串并整理它
var content=svg.wrap（'
'）.parent（）.html（）；
content=content.replace（/xlink:title='hide\/show'/g'，）；
内容=组件（内容）；
svg.unwrap（）；
//从svg创建一个图像
var image=新图像（）；
image.src='数据：image/svg+xml'，+内容；
image.onload=函数（）{
画布[0]。宽度=image.width；
画布[0]。高度=image.height；
//将图像渲染到画布
var context=canvas[0]。getContext（'2d'）；
解析（context.drawImage（image，0，0））；
};
返回dfd.promise（）；
/*返回{
svg:svg，
画布：画布
}; */
})；//targetElem.find（'svg'）.map（function（）{…}）的结尾；
//$.when（dfd）.done（函数（）{
//console.log（'dfd done'）；
dfd.then（函数（_canvas）{
console.log（'dfd done'，_canvas）；
// http://www.kubilayerdogan.net/html2canvas-take-screenshot-of-web-page-and-save-it-to-server-javascript-and-php/
$（“#仪表板”）.html2canvas({
onrendered：函数（画布）{
//将隐藏字段的值设置为图像数据（base-64字符串）
var dashboardPng=canvas.toDataURL（'image/png'）；
log（'dashboardPng:'+dashboardPng）；
$.ajax({
url:'save_dashboard_image.php'，
数据：{dashboardPngData:dashboardPng}，
类型：'POST'，
数据类型：'json'，
成功：函数（）{
console.log（'success'）；
}
,
错误：函数（xhr、状态、错误）{
console.log（'请求的页面为：'+document.URL+
“。返回的错误号为：”+xhr.status+
“。错误消息为：”+错误）；
}
});
}
});
//}）；//结束时间（dfd）.done（）
})；//dfd.then的结尾（函数（_canvas）{…}）
})；//保存仪表板单击功能结束
}); // 文件结束准备好了吗

解决方案根据特里的回答修改如下：

$（文档）.ready（函数（）{
$（“#保存仪表板”）。单击（函数（）{
//声明一个数组以存储来自每个svg元素的所有延迟对象
var svgDfds=[]，
targetElem=$（“#仪表板”）；
targetElem.find（'svg'）。每个（函数（）{
var dfd=new$.Deferred（），
svg=$（此），
画布=$（''）；
替换为（画布）；
//获取原始SVG字符串并整理它
var content=svg.wrap（'
'）.parent（）.html（）；
content=content.replace（/xlink:title='hide\/show'/g'，）；
内容=组件（内容）；
svg.unwrap（）；
//从svg创建一个图像
var image=新图像（）；
image.src='数据：image/svg+xml'，+内容；
image.onload=函数（）{
画布[0]。宽度=image.width；
画布[0]。高度=image.height；
//将图像渲染到画布
var context=canvas[0]。getContext（'2d'）；
//解决或拒绝延期付款
解析（context.drawImage（image，0，0））；
};
//将延迟对象推入数组
svgDfds.推力（dfd）；
})；//targetElem.find（'svg'）.map（function（）{…}）的结尾；
//检查所有延期
$.when.apply（$，svgDfds）.then（函数（_canvas）{
console.log（'dfd done'，_canvas）；
// http://www.kubilayerdogan.net/html2canvas-take-screenshot-of-web-page-and-save-it-to-server-javascript-and-php/
$（“#仪表板”）.html2canvas({
onrendered：函数（画布）{
//将隐藏字段的值设置为图像数据（base-64字符串）
var dashboardPng=canvas.toDataURL（'image/png'）；
log（'dashboardPng:'+dashboardPng）；
$.ajax({
url:'save_dashboard_image.php'，
数据：{dashboardPngData:dashboardPng}，
类型：'POST'，
数据类型：'json'，
成功：函数（）{
console.log（'success'）；
}
,
错误：函数（xhr、状态、错误）{
console.log（'请求的页面为：'+document.URL+
“。返回的错误号为：”+xhr.status+
“。错误消息为：”+错误）；
}
});
$(document).ready(function() {

    $( '#save_dashboard' ).click(function() {

        // Declare an array to store all deferred objects from each svg element
        var svgDfds = [],
            targetElem = $('#dashboard');

        targetElem.find('svg').each(function() {
            var dfd = new $.Deferred(),
                svg = $(this),
                canvas = $('<canvas></canvas>');

            svg.replaceWith(canvas);

            // Get the raw SVG string and curate it
            var content = svg.wrap('<p></p>').parent().html();
            content = content.replace(/xlink:title='hide\/show'/g, '');
            content = encodeURIComponent(content);
            svg.unwrap();

            // Create an image from the svg
            var image = new Image();
            image.src = 'data:image/svg+xml,' + content;
            image.onload = function() {
                canvas[0].width = image.width;
                canvas[0].height = image.height;

                // Render the image to the canvas
                var context = canvas[0].getContext('2d');

                // Resolve or reject the deferred
                dfd.resolve(context.drawImage(image, 0, 0));
            };

            // Push deferred object into array
            svgDfds.push(dfd);

        }); // end of targetElem.find('svg').map(function() {...});

        // Check for all deferreds
        $.when.apply($, svgDfds).then(function(_canvas) {
            console.log('dfd done', _canvas);

            // http://www.kubilayerdogan.net/html2canvas-take-screenshot-of-web-page-and-save-it-to-server-javascript-and-php/
            $('#dashboard').html2canvas({
                onrendered: function (canvas) {
                    //Set hidden field's value to image data (base-64 string)
                    var dashboardPng = canvas.toDataURL('image/png');
                    console.log('dashboardPng: ' + dashboardPng);

                    $.ajax({
                        url:'save_dashboard_image.php',
                        data:{dashboardPngData: dashboardPng},
                        type:'POST',
                        dataType:'json',
                        success: function(){
                            console.log('success');
                        }
                        ,
                        error: function(xhr, status, error){
                            console.log('The requested page was: ' + document.URL +
                                '. The error number returned was: ' + xhr.status +
                                '. The error message was: ' + error);
                        }
                    });
                }
            });
        });

    }); // end of save_dashboard click function
}); // end of document ready

$( '#save_dashboard' ).click(function() {
    var targetElem = $('#dashboard');

    var elementPromises = targetElem.find('svg').map(function() {
        // Create the deferred objects here!
        var dfd = new $.Deferred();
        …
        var image = new Image();
        …
        image.onload = function() {
            …
            dfd.resolve(context.drawImage(image, 0, 0));
        };

        return dfd.promise();
    }).get(); // an array, not a jquery collection

    var allLoaded = $.when.apply($, elementPromises);
    allLoaded.then(…);
});

$('#save_dashboard').click(function() {

    var svgDfd = [],  // Declare an array to store ALL deferreds from svgs
        $targetElem = $('#dashboard');

    // Use .each() to iterate through all SVGs
    $targetElem.find('svg').each(function() {

        // New deferred object per SVG instance
        var dfd = new $.Deferred();

        // At some point in your code, resolve or reject the deferred
        dfd.resolve();

        // Push deferred object into array
        svgDfds.push(dfd);
    }

    // Check for all deferreds
    $.when.apply($, svgDfds).then(function() {
        // Do stuff
    });
});

$(document).ready(function() {

    $( '#save_dashboard' ).click(function() {

        // Declare an array to store all deferredo objects from each svg element
        var svgDfds = [],
            $targetElem = $('#dashboard');

        $targetElem.find('svg').each(function() {
            var dfd = new $.Deferred(),
                svg = $(this),
                canvas = $('<canvas></canvas>');

            svg.replaceWith(canvas);

            // Get the raw SVG string and curate it
            var content = svg.wrap('<p></p>').parent().html();
            content = content.replace(/xlink:title='hide\/show'/g, '');
            content = encodeURIComponent(content);
            svg.unwrap();

            // Create an image from the svg
            var image = new Image();
            image.src = 'data:image/svg+xml,' + content;
            image.onload = function() {
                canvas[0].width = image.width;
                canvas[0].height = image.height;

                // Render the image to the canvas
                var context = canvas[0].getContext('2d');
                dfd.resolve(context.drawImage(image, 0, 0));
            };

            svgDfds.push(dfd);

        });


        $.when.apply($, svgDfds).then(function(){
            $('#dashboard').html2canvas({
                onrendered: function (canvas) {
                    //Set hidden field's value to image data (base-64 string)
                    var dashboardPng = canvas.toDataURL('image/png');
                    console.log('dashboardPng: ' + dashboardPng);

                    $.ajax({
                        url:'save_dashboard_image.php',
                        data:{dashboardPngData: dashboardPng},
                        type:'POST',
                        dataType:'json',
                        success: function(){
                            console.log('success');
                        }
                        ,
                        error: function(xhr, status, error){
                            console.log('The requested page was: ' + document.URL +
                                '. The error number returned was: ' + xhr.status +
                                '. The error message was: ' + error);
                        }
                    });
                }
            });
        });

    });
});