Как остановить мерцание текста или элемента при использовании ajax для обновления через определенные промежутки времени?

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>

Answer 1

У меня была такая же проблема при использовании jquery load();

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

В ajax.php, который я загрузил в #div, я снова включил библиотеку jquery и мою таблицу стилей.поэтому новое содержимое получило новый стиль и функции jquery, верно?

Обнаружено, что новое содержимое выбирает родительские функции css и js!

нижний предел:

, включая те же cssновый загруженный div в качестве родительского вызывает мигание, потому что элементы html снова стилизуются.

Answer 2

есть более простая в использовании функция jquery для загрузки текста со страницы.Вы можете заменить весь вызов .ajax на $ ("# ajaxStatus"). Load ("../ getStatus /" + id)

Не уверен, что это остановит мерцание, но по крайней мере должно сделать программу более чистой.

Answer 3

Используйте это:

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

Answer 4

Я бы сказал, 500 слишком быстро.Вы должны помнить, что интервал будет продолжать запрашивать информацию, даже если вызов ajax не завершен.Я предлагаю либо изменить setInterval на setTimeout и повторно инициализировать время ожидания в случае успеха, либо увеличить интервал до 1500-2000.Вам лучше с таймаутом, хотя

Answer 5

Попробуйте добавить чек, чтобы вы обновлялись, только если значение изменилось.

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