1

Tenho um script que precisa ser executado somente após o retorno de uma requisição da página, pois a requisição retorna conteúdo HTML, e a função que quero executar logo após, implementa esse HTML recebido. O problema é que não posso mexer nas outras funções pois meu acesso é limitado.

Já sei que essas requisições são feitas quando clico no link que na imagem chamei de "GATILHO", porém, as respostas não só chegam em tempos muito variados, como também mudam a ordem de retorno por ser assíncrono.

Só preciso reconhecer quando 1ª resposta (do código que não posso mudar) vier pra mim, pra só então eu executar o meu script que traz a 2ª resposta.

Gatilho e tempo de resposta

Minha solução temporária foi usar o setTimeout() para executar minha função 4 segundos após o clique no link GATILHO (Meus cursos), porque pelos meus testes, mesmo com uma internet "razoável", dá tempo tempo de receber todas as requisições.

Abaixo eu mostro o cabeçalho da 1ª resposta. Alguém teria alguma ideia do que eu poderia fazer?

Cabeçalho

4
  • Se entendi bem, você quer fazer um tipo de listener para verificar alguma mudança na página que tenha a ver com o retorno da 1ª resposta, é isso?
    – Meu ovo
    25/10/2017 às 20:54
  • Exatamente. Procurei por exemplos mas... nada.
    – GOliveira
    25/10/2017 às 20:57
  • Por mais que esteja funcionando com o setTimout() é notada demora na execução da 2ª requisição, pois, por mais que a 1ª resposta chegue, a segunda está setada fixa pra só executar após 4 segundos, tempo o suficiente para os novos usuários pensarem que não está funcionando e acabar clicar de novo no link. Consegui ser claro, @DvD ?
    – GOliveira
    25/10/2017 às 21:08
  • Sim... depois que chama a segunda função da segunda resposta, o que acontece? a página será recarregada depois? Essa segunda função, mexe na mesma div da primeira?
    – Meu ovo
    25/10/2017 às 21:10

1 Resposta 1

1

Você poderia usar o DOMSubtreeModified, porém, segundo documentações, ele está sendo descontinuado e não seria recomendável usá-lo.

O que pode ser feito, como solução, é criar um setInterval que ficará verificando, após o tempo setado, quando um determinado elemento existir na página.

Como não sabemos ao certo os elementos da sua página (sua pergunta não fornece tais detalhes), o conceito abaixo funciona e deve ser adaptado de acordo ao seu código:

Vamos supor que eu tenho o seguinte HTML:

<div>
   <div id="retorno">
      Texto etc...
   </div>
</div>

E o Ajax insere, como retorno da 1ª resposta, o seguinte código para dentro da div "retorno":

<div id="resposta1">
    Esta é a resposta 1
</div>

Após o Ajax, o HTML ficaria assim:

<div>
   <div id="retorno">
      <div id="resposta1">
         Esta é a resposta 1
      </div>
   </div>
</div>

Com o script abaixo, usando setInterval, eu verificaria quando essa div "resposta1", retornada do Ajax, estaria presente na página (antes do Ajax ela não existia) e chamar a segunda função:

<script>
temporizador = setInterval(function(){
    if($("#resposta1")){
       clearInterval("temporizador"); // paro o setInterval
       // chamo a segunda função
    }
}, 1000); // de 1 em 1 segundo
</script>

Logo, para adaptar o "temporizador" no exemplo acima, você precisa saber qual div é inserida apenas e exclusivamente no retorno do Ajax da 1ª resposta.

1
  • Muito bom!!! Como a função que uso só é ativada após o click num link, não sobrecarregaria a página nesse seu método. Agora, eu não conhecia o DOMSubtreeModified . Como você disse que esse método está sendo descontinuado, fui ler sobre, e isso me levou ao MutationObserver, e ele que passei a usar. Ele monitora se algum atributo na página é modificado. Atendeu certinho ao que eu queria! Obrigado @DvD !!!
    – GOliveira
    2/11/2017 às 13:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .