Olá boa tarde,
Estou implementando o uso de Promise em um código para alterar propriedades da página, e estou aplicando da seguinte forma:
Tenho o botão que ao ser clicado chama a função "loading()" que faz o uso de Promise.all().
$('.pts-btn-month-view').click( function () {
console.log('Inicializado');
var p = new Promise(function(resolve, reject) {
resolve(loading());
});
p.then(function(result) {
console.log('Finalizado');
return result;
});
});
E para cada promise executo uma determinada situação, por exemplo o código do showOverlay() irá exibir um ícone até finalizar o carregamento pesquisa da página.
var loading = function() {
return new Promise((resolve, reject) => {
Promise.all([
showOverlay(),
loadDisplay(),
hideOverlay()
]).then()
resolve();
});
};
Função para exibir o overlay.
function showOverlay () {
return new Promise ((resolve, reject)=>{
$("#loading").show();
$("#black-overlay").show();
resolve();
});
}
E para fechar o overlay, temos a função abaixo;
var hideOverlay = function(){
return new Promise ((resolve, reject)=>{
$("#loading").hide();
$("#black-overlay").hide();
resolve();
});
}
Ocorre que tanto o showOverlay() e o hideOverlay() não são executados de acordo com a sequência, eles somente são executados quando finalizar todo o processo. Minha pergunta é se eles não deveriam ser executados assim que a sua promise é chamada?