Isto é uma pergunta recorrente por toda a internet e por todo o mundo: por que determinados eventos ocorrem foram de ordem no javascript.
Há sempre a explicação: javascript é assíncrono, de modo instruções sucessivas (e não tratadas) são executadas sem que segunda espere a primeira ser concluída, levando assim às supresas, quando se espera que algo aconteça antes de outro.
Para resolver este problema, foram criados as Promises e os Async-await.
Por estes novos recursos é relativamente simples encadear-se as instruções através do método THEN, quando a segunda espera a conclusão da primeira.
Mas eu estou com um problema invertido: a primeira instrução só é executada no fim do processo, mesmo usando-se Promises.
Explico: no exemplo simples abaixo, desejo que, ao clicar no botão, uma caixa de texto seja preenchida com 'Processando...'. E que, quando terminar, a mesma caixa de texto receba o texto 'Terminou!'.
Mas, isto não acontece. Quando o procedimento termina, a caixa de texto recebe as duas mensagens quase ao mesmo tempo, com a segunda naturalmente 'matando' a primeira.
Ou seja, embora haja um processamento demorado, a caixa só recebe o segundo texto no fim. Parece-me que isto se dá por conta do famoso assincronismo da linguagem também.
Eu gostaria de ter as duas situações separadamente: no clique e no fim do procedimento, mas já tentei várias abordagens (incluindo aí a tentativa exdrúxula de se criar uma função especificamente async-await para mostrar a mensagem inicial e passar o resultado para a seguinte, que não consegui fazer funcionar do mesmo jeito).
O código mencionado é:
jQuery("#idBtnTeste").click(function (){
jQuery("#idTxt").val("Processando...");
fAsyncPesquisaDataset().then(function(resultado) {
for (i=0;i<resultado.values.length;i++){
console.log(resultado.values[i].RAZAO_SOCIAL);
}
}).then(function (){
jQuery("#idTxt").val("Terminou!");
});
});//idBtnTeste click