Проблемы с функцией отсрочки

Question

У меня есть функция, которая в основном создает новый div из существующих div и затем генерирует изображение из этого. Все это прекрасно работает. По завершении этого, я хотел бы empty и hide этот новый div. Я думал, что могу использовать некоторую отложенную функцию, чтобы гарантировать, что новый div не будет empty до того, как функция, которая сделает изображение законченным. Если они происходят в одно и то же время, или сначала происходит empty, тогда созданное изображение пусто (так как div пуст).

В моем коде функция для удаления и скрыть новый div происходит одновременно или перед функцией для создания изображения. Как я могу гарантировать, что функция пуста и скрыть новый div появится после того, как функция для создания изображения будет полностью завершена.

Мой код выглядит следующим образом:

$('#export_all').click(function(){ 
    $('#gen_narr').hide(); 
    $("#full_complete").empty(); 

    var storyboard = $(this).closest('div').find(".full_storyboard"); 
    var nar_name = $(this).closest('div').find(".my_narrative_name"); 
    var nar_text = $(this).closest('div').find(".complete_narrative"); 

    $("#full_complete").append($(storyboard).html() + " " + $(nar_name).html() + " " + $(nar_text).html()); 
    full = $(this).closest('div').find("#full_complete"); 
    $.when(generateImg()).then(restoreIt()); 
}); 

function generateImg(callback) { 
    html2canvas($(full), { 
     onrendered: function(canvas) { 
      theCanvas = canvas; 
      canvas.toBlob(function(blob) { 
       saveAs(blob, + "your_storyboard.jpg"); //this works 
      }); 
     } 
    }); 
} 

function restoreIt() { 
    $("#full_complete").hide(); 
    $('#gen_narr').show(); 
    console.log('restore'); //this works 
} 

Answer 1

Вы на самом деле не с помощью обещаний/deferreds здесь с вашей generateImg или restoreIt не возвращает ничего. вам нужно создать обещание внутри generateImg, которые будут решены в onrendered

Попробуйте что-то вроде этого

function generateImg(callback) { 
    var dfd = jQuery.Deferred(); 

    html2canvas($(full), { 
     onrendered: function(canvas) { 
      theCanvas = canvas; 
      canvas.toBlob(function(blob) { 
       saveAs(blob, + "your_storyboard.jpg"); //this works 
      }); 

      dfd.resolve("hurray"); 
     } 
    }); 

    return dfd.promise(); 
}