当Javascript回调无法使用时

Question

我知道你不应该在Javascript中进行阻塞，而我从未因为不得不这样做而无法重构。但我遇到了一些我不知道如何处理回调的东西。我试图在html2canvas中使用Downloadify (这只适用于IE，下载数据URI在IE中不起作用)。您必须指定一个数据函数，以便Flash对象知道下载什么。不幸的是，html2canvas是异步的。在获得数据URI之前，我需要能够等待已呈现的事件被填充。

$('#snapshot').downloadify({
        filename: function(){
            return 'timeline.png';
        },
        data: function(){
            var d = null;
            html2canvas($('#timeline'),{
                onrendered:function(canvas){
                    d = canvas.toDataURL();
                }
            });

            //need to be able to block until d isn't null

            return d;
        },
        swf: '../static/bin/downloadify.swf',
        downloadImage: '../static/img/camera_icon_32.png?rev=1',
        width: 32,
        height: 32,
        transparent: true,
        append: false
});

我愿意接受其他方法的建议，但我被困住了。

编辑--有几条评论让人觉得需要更多关于Downloadify的信息(https://github.com/dcneiner/Downloadify)。Downloadify是一个Flash对象，可用于触发浏览器的“另存为”窗口。downloadify()函数只是简单地对Flash进行初始化，并在元素中添加一个<object/>标记。因为它是一个Flash对象，所以您不能在不引起安全冲突的情况下从Javascript触发事件。

我只将它用于IE下载一个画布元素的图像。在所有其他浏览器中，我只需使用一个数据URI，但IE是一个特殊的花。

Answer 1

对于那些花了一整晚试图让HTML5特性在IE9上工作的可怜人来说，下面是我最后使用的内容。我可以这样做，因为我们并不太担心IE用户会获得更少的用户友好体验，这是一个内部应用程序。但是，YMMV。

基本上，当返回字符串为空时，Downloadify将什么也不做。因此，由于html2画布呈现的异步特性，用户第一次单击时，什么也不会发生。第二次(假设渲染已经完成，如果不是什么也不会继续发生，直到它是)，该值不是空白的，保存继续进行。我使用onCancel和onCoplete回调再次空出该值，以确保下次用户尝试保存时，图像不会太陈旧。

这并不说明用户在单击之间以某种方式更改DOM的事件，但我不知道可以为此做些什么。我一点也不为这感到骄傲，但IE就是它的本来面目。它起作用了，现在就够了。

    var renderedPng = '';
    var rendering = false;

    $('#snapshot').downloadify({
        filename: function(){
            return 'timeline.png';
        },
        data: function(){
            if(!rendering && renderedPng == ''){
                rendering = true;
                html2canvas($('#timeline'),{
                    onrendered:function(canvas){
                        renderedPng = canvas.toDataURL().replace('data:image/png;base64,','');
                        rendering = false;
                    }
                });
            }
            return renderedPng;
        },
        onComplete:function(){
            renderedPng = '';
        },
        onCancel: function(){
            renderedPng = '';
        },
        dataType: 'base64',
        swf: '../static/bin/downloadify.swf',
        downloadImage: '../static/img/camera_icon_32.png?rev=1',
        width: 32,
        height: 32,
        transparent: true,
        append: false
    });