JS：等待函数内部完成的方法

Question

我对JS并不熟悉，并且与下一个任务混淆。

我有远程表单，但在发送数据之前，我需要做一些操作（用数据填写表单输入）。这是我的代码：

$('.edit_slide').on('ajax:beforeSend', function(event, xhr, settings) { 
    html2canvas($('.slide_canvas'), { 
     onrendered: 
     function(canvas) { 
      var img = canvas.toDataURL("image/png"); 
      $('#slide_thumbnail').val(img); 
     } 
    }); 
}); 

形成ajax从：https://github.com/rails/jquery-ujs/wiki/ajax。

接下来我需要使用html2canvas（http://html2canvas.hertzen.com/documentation.html）从DIV创建图像并将其传递给服务器。

但先发送表单并在html2canvas之后完成（使用空格#slide_thumbnail提交并填充数据后）。

如果我把alert（'hello'）替换为html2canvas，alert会先工作，然后等待我按下'Ok'并形成提交后。

是否有可能等待图像创建并发送之后？

Answer 1

这可以应用于以及（DEMO）：

$("form").on('submit', function(e) { 
    e.preventDefault(); // prevent form submission 
    console.log('Submit Prevented...'); 

    // do stuf, i.e. 
    html2canvas($('.slide_canvas'), { 
     onrendered : function(canvas) { 
      var img = canvas.toDataURL("image/png"); 
      $('#slide_thumbnail').val(img); 

      // Submit using ajax 
      $.ajax({ 
       type : 'post', 
       url : 'your_url', 
       data : { html : $('#slide_thumbnail').val() }, 
       success : function(data){ 
        console.log('Data returned fron the server : ' + data); 
       } 
      }); 
     } 
    }); 
}); 

Answer 2

你的问题是，html2canvas立即返回，设置稍后调用的回调。回调在ajax调用完成后调用。

解决方案：

1. 对Ajax之前发送的形式调用html3canvas，然后调用阿贾克斯onrendered回调后发送。 （这是表单上的javascript）
2. 等待ajax发送函数内部的回调。 （http://api.jquery.com/category/deferred-object/）