使用ajax间隔刷新时如何停止文本或元素的闪烁?

发布于 2024-11-16 08:49:25 字数 621 浏览 0 评论 0原文

<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>
<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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

極樂鬼 2024-11-23 08:49:25

有一个更容易使用的 jquery 函数来从页面加载文本。
您可以将整个 .ajax 调用替换为 $("#ajaxStatus").load("../getStatus/" + id)

不确定这是否会停止闪烁,但至少应该使程序更干净。

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.

最美的太阳 2024-11-23 08:49:25

我在使用 jquery load(); 时遇到了同样的问题。

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

在加载到 #div 的 ajax.php 中,我再次包含了 jquery 库和样式表。所以新内容有新的风格和 jquery 功能,对吗?

发现新的内容继承了父级的css和js功能!

底线:

在新加载的 div 中包含相同的 css 作为父级会导致闪烁,因为 html 元素会再次设置样式。

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.

も让我眼熟你 2024-11-23 08:49:25

尝试添加一个检查,以便仅在值发生更改时更新。

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

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);        
}
眼趣 2024-11-23 08:49:25

我想说500太快了。您必须记住,即使 ajax 调用未完成,间隔也会继续进行并请求信息。我的建议是要么将 setInterval 更改为 setTimeout 并在成功时重新初始化超时,要么将间隔提高到 1500-2000。不过你最好还是超时

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

终弃我 2024-11-23 08:49:25

使用这个:

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

Use this:

$( '#ajaxStatus' ).replaceWith( jason.status );
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文