Javascript 仅当数据尚未缓存时显示加载微调器

目前，我的代码显示一个加载微调器gif，返回数据并缓存它。但是，一旦数据被缓存，在加载数据之前，加载gif会闪烁一秒钟。这会分散我的注意力，我想把它处理掉。我想我在这里的

beforeSend

函数中使用了错误的方法：

$.ajax({
                type    : "GET",
                cache   : false,
                url     : "book_data.php",
                data    : { keywords : keywords, page : page },
                beforeSend : function() {                   
                    $('.jPag-pages li:not(.cached)').each(function (i) {                        
                        $('#searchResults').html('<p id="loader">Loading...<img src="../assets/images/ajax-loader.gif" alt="Loading..." /></p>');
                    });
                },
                success : function(data) {  
                    $('.jPag-current').parent().addClass('cached');
                    $('#searchResults').replaceWith($(data).find('#searchResults')).find('table.sortable tbody tr:odd').addClass('odd');
                    detailPage();
                    selectForm();                   
                }
            });

$.ajax({
键入：“获取”，
cache:false，
url:“book_data.php”，
数据：{关键字：关键字，页面：页面}，
beforeSend:function（）{
$（'.jPag页li:not（.cached'）。每个（函数（i）{
$（“#searchResults”）.html（“
正在加载…
”；
});
},
成功：函数（数据）{
$（'.jPag current'）.parent（）.addClass（'cached'）；
$（'searchResults'）。替换为（$（数据）。查找（'searchResults'））。查找（'table.sortable tbody tr:odd'）。addClass（'odd'）；
detailPage（）；
选择表单（）；
}
});

编辑：

从注释中尝试此操作，使用工作代码再次更新

var timeout =  setTimeout(function(){ 
            $('#searchResults').html('<p id="loader">Loading...<img src="../assets/images/ajax-loader.gif" alt="Loading..." /></p>');
          }, 500 ); 
            $.ajax({
                type    : "GET",
                cache   : false,
                url     : "book_data.php",
                data    : { keywords : keywords, page : page },
                beforeSend : function() {   
                    timeout;
                },
                success : function(data) {  
                    clearTimeout(timeout);
                    $('.jPag-current').parent().addClass('cached');
                    $('#searchResults').replaceWith($(data).find('#searchResults')).find('table.sortable tbody tr:odd').addClass('odd');
                    detailPage();
                    selectForm();                   
                }
            });

var timeout=setTimeout（函数（）{
$（“#searchResults”）.html（“
正在加载…
”；
}, 500 ); 
$.ajax({
键入：“获取”，
cache:false，
url:“book_data.php”，
数据：{关键字：关键字，页面：页面}，
beforeSend:function（）{
超时；
},
成功：函数（数据）{
clearTimeout（超时）；
$（'.jPag current'）.parent（）.addClass（'cached'）；
$（'searchResults'）。替换为（$（数据）。查找（'searchResults'））。查找（'table.sortable tbody tr:odd'）。addClass（'odd'）；
detailPage（）；
选择表单（）；
}
});

您可以延迟显示加载的gif大约四分之一秒，这样它就不会显示它是否从缓存加载了。

嗯，这样做有一些奇怪的问题，加载gif会在分配的时间后替换html。也尝试了延迟（），但没有用