Ajax request with flashing setInterval

Question

Ajax request with flashing setInterval

Asked 9 years, 9 months ago

Viewed 193 times

2

The following piece of code aims to place the contents of a text file inside a div. Like the text file can be updated, the div is intended to be updated with the latest file content. But every 2 seconds the contents of the div blinks. How can I achieve the same obtjective without the content of the div blinking? Thank you.

<script type="text/javascript">
   setInterval("loadXMLDoc()",2000);
   function loadXMLDoc(){
        var xmlhttp;
       // codigo para IE7+, Firefox, Chrome, Opera, Safari
       xmlhttp=new XMLHttpRequest();
       xmlhttp.onreadystatechange=function(){
           document.getElementById("minhaDiv").innerHTML=xmlhttp.responseText;
       }
      xmlhttp.open("GET","ajax_doc.txt",true);
      xmlhttp.send();
   }
 </script>

2

Hi John, what you are doing is on the right track. I would change to setTimeout(loadXMLDoc, 2000); to be fired inside the .onreadystatechange to make sure you only get one call at a time. Regarding "blink" gives me the idea that you have a lot of content and that the browser needs time to render... can you change less content at a time? And by the way you can clarify in your question what has this content? Images? text only?

– Sergio

2015/02/22 at 00:12
1

It is also necessary to check whether the responseText is already available as the onreadystatechange is called several times before that. Maybe it is the cause of the problem.

– bfavaretto

2015/02/22 at 00:23
The content is text only. It is a. txt file with only two words. Thank you

– user21958

2015/02/22 at 00:36

1 answer

Browser other questions tagged javascript ajax

You are not signed in. Login or sign up in order to post.

by Tobias Mesquita • **22,900** points · Answer 1 · 2015-02-22T01:00:48+00:00

@John, I performed some tests here, the problem occurred when the innerHTML was replaced by a long text.

To get around this situation, I did the following.

I created a div calling for container
I added the text to div container
I cleaned the div minhaDiv
I added the div containerà div minhaDiv

For the demo below, I used the Baconipsum API to generate random text.

setInterval(loadXMLDoc,2000);

var minhaDiv = document.getElementById("minhaDiv");
function loadXMLDoc(){
    var xmlhttp;
    // codigo para IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.responseText && xmlhttp.responseText.length > 0)
        {   
            var content = document.createElement("div");            
            var paragrafos = JSON.parse(xmlhttp.responseText);
            for (var i = 0; i < paragrafos.length; i++) {
                var paragrafo = document.createElement("p");                
                paragrafo.innerHTML = paragrafos[i];
                content.appendChild(paragrafo);         
            }
        
            if (minhaDiv.firstChild){
                minhaDiv.removeChild(minhaDiv.firstChild);
            }
            minhaDiv.appendChild(content);
        }
    }
    xmlhttp.open("GET","http://baconipsum.com/api/?type=all-meat&paras=10&start-with-lorem=1",true);
    xmlhttp.send();
}

<div id="minhaDiv">
</div>