jQuery (ajax) $.get 方法延迟结果

Question

我正在使用 $.get() 从 php 脚本中获取一些元素，然后通过将它们“写入”到 div 中来显示结果。这会定期进行，以及在单击 div 或重新加载页面时进行。代码如下：

function fetchnew(){

    var status = $J.cookie("status_on");

    if (status == 'on'){
    //fetch new items
    //results from new-items.php have this format:
    //<p>Item1</p><p>Item2</p>...
    $J.get(modulebaselink+'new-items.php', '', function(newitems){
        $J('#content').html(newitems);
        updatestatus();
        });
    }
fetchnew_timeout = setTimeout('fetchnew();', refresh_rate);
}//end fetchnew()

function updatestatus(){

   var status = $J.cookie("status_on");

   if (status == 'on'){
        //Show number of loaded items
        var totalItems=$J('#content p').length;
        $J('#status').html("Items ("+totalItems+")");

   }
}

我的问题是页面重新加载后#status 内容显示有一些延迟。当页面加载时，我得到“Items(0)”约 1 秒，然后 0 变为实际值。在显示实际值之前，有什么方法可以使“Items(0)”无效？或者至少，缓存以前的值并在“Items(new_value)”出现之前显示“Items(old_value)”而不是“Items(0)”。我试着用 cookie 做最后一个，但 'Items(0)' 又出现了……

Answer 1

听起来像是localStorage 的合理用例。像这样扩展updatestatus()：

// this should be called at some entry point of your script
var ls_available = 'localStorage' in window;

if(ls_available && localStorage.getItem('totalItems'))
   $J('#status').html("Items ("+localStorage.getItem('totalItems')+")");

function updatestatus(){
    var status = $J.cookie("status_on");

    if (chat_status == 'on'){
        var totalItems=$J('#content p').length;
        $J('#status').html("Items ("+totalItems+")");

        if(ls_available) localStorage.setItem('totalItems', totalItems);
    }
}

Answer 2

如果您的页面（调用fetchnew() 的页面）是用PHP 呈现的，请调用Ajax 文件(new-items.php) 调用的相同函数。这样，您的内容就会立即出现。