Is it possible to monitor all of the page’s Responses and Headers to use as a function trigger?

Question

I have a script that needs to be executed only after the return of a page request, because the request returns HTML content, and the function I want to execute soon after, implements that received HTML. The problem is I can’t touch the other functions because my access is limited.

I already know that these requests are made when I click on the link that in the image I called "TRIGGER", however, the answers not only arrive in very varied times, but also change the order of return for being asynchronous.

I just need to recognize when first response (of the code I cannot change) come to me, only then I run my script that brings the second answer.

My temporary solution was to use the setTimeout() to perform my function 4 seconds after clicking the TRIGGER link (My courses), because for my tests, even with a "reasonable" internet, it gives time to receive all requests.

Below I show the header of the first answer. Would anyone have any idea what I could do?

Answer 1

You could use the DOMSubtreeModified, however, second documentations, it is being discontinued and it would not be recommended to use it.

What can be done, as a solution, is to create a setInterval that will be checking, after the time set, when a certain element exists on the page.

As we do not know for sure the elements of your page (your question does not provide such details), the concept below works and should be adapted according to your code:

Let’s assume I have the following HTML:

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

And Ajax inserts, as a return of the first answer, the following code into the div "return":

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

After Ajax, HTML would look like this:

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

With the script below, using setInterval, I’d check when that div "answer1", returned from Ajax, would be present on the page (before Ajax it did not exist) and call the second function:

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

Therefore, to adapt the "timer" in the example above, you need to know which div is inserted only and exclusively on the return of Ajax’s first response.