How do you stop flickering of text or an element when using ajax to refresh in intervals?

Question

<script>

$(document).ready(function()
    {
        setInterval(doAjaxStuff, 500);
    }); 
    function doAjaxStuff()
    {
        /* $.ajaxSetup ({ cache: false  }); */  

        $.ajax
        ({
            url: "../getStatus/"+id,
            dataType: 'json',
            success: function(json) 
            {
                if(json.status ==  "ACTIVE")
                {
                    $('#ajaxStatus').html(jason.status);

                }
            });
         }

</script>


//I get refreshed and cause flickering
<p id= ajaxStatus > Refresh Me</p>

The page refreshes every 1/2 second and appears to come and go within that transition time (much like a tv screen flicker). is there anyway to smooth that out? — stackoverflow, Jun 21 '11 at 14:02

Rodolfo · Answer 1 · 2011-06-21T16:41:22.070

2

there is an easier to use jquery function to load text from a page. You could replace the whole .ajax call with $("#ajaxStatus").load("../getStatus/" + id)

Not sure if that stops the flickering but at least should make the program cleaner.

edited Jun 21 '11 at 16:41

answered Jun 21 '11 at 13:59

Rodolfo

4,155
23
38

score 2 · Answer 2 · edited Sep 04 '11 at 20:26

I had the same problem on using a jquery load();

$('#div').load('/ajax.php', data);

In the ajax.php that i loaded into the #div i included the jquery lib and my stylesheet again. so the new content got new style and jquery functions right?

Found out the new content picks up the parent css and js functions!

bottomline:

including same css in new loaded div as parent cause blinking because the html elements get styled again.

score 1 · Answer 3 · edited Sep 08 '17 at 01:21

1

Use this:

$( '#ajaxStatus' ).replaceWith( jason.status );

edited Sep 08 '17 at 01:21

Kalamarico

5,466
22
53
70

answered Sep 07 '17 at 21:30

Shaze

792
1
9
14

It won't stop flickering even if you change the interval timer, although correct way and good practice is to use setTimeout instead of setInterval. As in some cases, it has been found that it triggers race condition. The solution to your issue will be fixed if you use - .replaceWith() instead of .html(). This is known if you're trying to refresh any element on the page. – Shaze Sep 11 '17 at 09:36
Also just so you know what the .replaceWith does is - It only updates only the content. The replaceWith() method replaces selected elements with new content. – Shaze Sep 11 '17 at 09:45

score 1 · Accepted Answer · answered Jun 21 '11 at 13:58

1

Try to add a check so you only update if the value has changed.

if(json.status ==  "ACTIVE" && $('#ajaxStatus').html() !== "ACTIVE")
{
    $('#ajaxStatus').html(jason.status);        
}

answered Jun 21 '11 at 13:58

Björn

1,593
1
13
28

score 1 · Answer 5 · answered Jun 21 '11 at 13:59

I would say 500 is way too fast. You have to remember that the interval will keep going and requesting the info even if the ajax call is not completed. my suggestion is to either change setInterval to setTimeout and reinitialize the timeout on success, or crank up the interval to 1500-2000. You better off with the timeout though

How do you stop flickering of text or an element when using ajax to refresh in intervals?

5 Answers5