Как узнать закончилось ли выполнение функции и подфункций внутри нее?

Question

[Кирилл]

Возможно вопрос глупый но изучать только начал нормально JS/jQuery и вот возникла проблема:
Есть код который создает функцию и выводит через script на определенном месте php файла и все работает отлично, но вот решил повесить лоадер на процесс выволнения всего этого дела, но так получается что все выполняется сразу и лоадер сразу показывается и закрывается, так как функция html2canvas работает с задержкой поочередно, и когда код выполнился, в консоли выводится дебаг что функция выполнена.
Собственно как мне отследить что функция html2canvas все закончила и можно скрыть лоадер?
Думал уже модифицировать встроенную функцию с добавлением переменной и подсчетом количества обьектов и когда последний выведет готовность только тогда запускать скрытие. Спасибо

jQuery(document).ready(function($) {
		function loader(status) {
			if (status == "show") { 
				$(".loader").removeClass("hide");
			} else {
				$(".loader").addClass("hide");
			}
		}
		
		loader("show");
		
		// в этом месте вставляются динамически функции вроде этой
		$("#some_id-17222-0").get_object("param1", "param2");
		
		html2canvas(document.querySelector("#some_id-17222-0")).then(canvas => {$("#some_id-17222-0").empty();document.querySelector("#some_id-17222-0").appendChild(Canvas2Image.convertToImage(canvas));});
		// 

		loader("hide");
	});

Answer 1

[Владимир Проскурин]

Не знаю, что это за функция html2canvas, но как видно, она возвращает промис. Тогда так

html2canvas(document.querySelector("#some_id-17222-0"))
   .then(canvas => {$("#some_id-17222-0").empty();document.querySelector("#some_id-17222-0").appendChild(Canvas2Image.convertToImage(canvas));})
   .then(() => { /* пишем код который будет скрывать лоадер */});

Comments

[Кирилл]

Только там таких функций подряд для каждого обьекта по две, поэтому так не вариант, а обернуть в функцию толку не даст если только каунтер не делать
https://html2canvas.hertzen.com/ линка на функцию если нужно

// Элемент 1
	$("#some_id-17222-0").get_object("param1", "param2");
	html2canvas(document.querySelector("#some_id-17222-0")).then(canvas => {$("#some_id-17222-0").empty();document.querySelector("#some_id-17222-0").appendChild(Canvas2Image.convertToImage(canvas));});
	
	// Элемент 2
	$("#some_id-17222-1").get_object("param1", "param2");
    html2canvas(document.querySelector("#some_id-17222-1")).then(canvas => {$("#some_id-17222-1").empty();document.querySelector("#some_id-17222-1").appendChild(Canvas2Image.convertToImage(canvas));});
	// И так далее

Спасибо!

[Владимир Проскурин]

jensen6720185, используйте Promise.all в него передаете все промисы, и он вызовет свой then когда все переданные промисы завершат свою работу. Выглядеть буде так

// Элемент 1
var promises = []; // Массив промисов
  $("#some_id-17222-0").get_object("param1", "param2");
  promises.push(html2canvas(document.querySelector("#some_id-17222-0")).then(canvas => {$("#some_id-17222-0").empty();document.querySelector("#some_id-17222-0").appendChild(Canvas2Image.convertToImage(canvas));}));
  
  // Элемент 2
  $("#some_id-17222-1").get_object("param1", "param2");
    promises.push(html2canvas(document.querySelector("#some_id-17222-1")).then(canvas => {$("#some_id-17222-1").empty();document.querySelector("#some_id-17222-1").appendChild(Canvas2Image.convertToImage(canvas));}));
  // И так далее

 // теперь в promises массив всех промисов (не важно, выполнились они уже к этому моменту
Promise.all(promises).then(function(res) {
// прячем прелоадер. 
});

[Кирилл]

Владимир Проскурин, Понял, сейчас попробую, и если не сложно как считаете лучше создавать обьекты через php, я имею ввиду оборачивающие дивы и тд, или делать уже перед выполнением этого кода в JS?

[Владимир Проскурин]

jensen6720185, сложно так ответить, все зависит от контекста. Если есть возможность на php, делайте на php, если нет, делайте на js.

[Кирилл]

Владимир Проскурин, Понял, еще раз большое спасибо!