Question

您好我在下面的代码中有一个AJAX结果的缓存机制：

jQuery( document ).ready( function( $ ) {
var _doing_ajaxx = false;
$('.toolbar').remove();
$('#mydiv #frontend').click(function() {    
if (_doing_ajaxx) {
    return false;
}

var title_shortcode = $(this).text();


var insert_namex=  $(this).attr('class');


var titlejsselector=title_shortcode.replace(/ /g,'');


var buttonval=$('#'+titlejsselector+' input').val();

if (buttonval=='Minimize')  {
//stop ajax request if button is set

    $('#'+titlejsselector+' div').remove();
    $('#'+titlejsselector+' input').remove();

} else {
//initialize ajax variables
var cacheObj = {};
var data = {
        action: 'test_ajax_response',
        test_ajax_response_nonce: the_ajax_script.test_ajax_response_nonce, 
        postID_from_ajax : the_ajax_script.postid_to_ajax,
        insert_name_ajax: insert_namex,
        title_ajax: title_shortcode
    }; 
if (cacheObj.postID_from_ajax){

display(cacheObj.postID);

}else{

  // Do your ajax call
$.post(the_ajax_script.ajaxurl, data, function(response) {

    _doing_ajaxx = false;
    cacheObj.postID_from_ajax = response;
    display(response);

});

 }

 function display(response){

  $('#mydiv #frontend').next().slideToggle();   
  $('#mydiv #'+titlejsselector).append(response+"<input type='hidden' id='minimizebutton' value='Minimize'>");
  SyntaxHighlighter.highlight();

  $('.toolbar').remove();

  }   

}); 


});

但是，我使用Firebug进行了检查，它仍然向服务器发送请求，而不是使用缓存的结果。

上面的代码就是这样的。用户将首先单击该链接，然后将结果（来自AJAX响应）显示给服务器。用户可以通过再次单击链接来最小化结果。这是第二次点击。最小化按钮将删除结果。如果用户再次单击链接以再次查看结果，我不想再次请求服务器，而是使用第一次单击时的缓存结果。

上述代码需要更改什么？感谢您的任何提示。

更新：我还注意到当用户最小化结果时，第二次单击时缓存变量cacheObj.postID_from_ajax被销毁（或变空）。因此，在第三次单击时，此缓存变量不能再使用，因为它为null。

Answer 1

每次在点击处理程序中创建一个空的cacheObj。然后在创建它之后，您正在寻找一个不存在的属性，因为您只是将其声明为空对象

var cacheObj = {};

if (cacheObj.postID_from_ajax)/* object has no properties...will always be false*/

您需要在点击处理程序之外声明var cacheObj = {};。

Answer 2

cacheObj是点击处理程序的本地，这里所有点击处理程序都可以使用相同的cacheObj，因为它位于同一个共享上下文（闭包）中。

试试这个

jQuery(document).ready(function($) {
    // initialize ajax variables
    var _doing_ajaxx = false;
    //cache object is created in the covering closure since it must be available across all click handlers
    var cacheObj = {};

    $('.toolbar').remove();
    $('#mydiv #frontend').click(function() {
        if (_doing_ajaxx) {
            return false;
        }

        var title_shortcode = $(this).text();

        var insert_namex = $(this).attr('class');

        var titlejsselector = title_shortcode.replace(/ /g, '');

        var buttonval = $('#' + titlejsselector + ' input').val();

        if (buttonval == 'Minimize') {
            // stop ajax request if button is set

            $('#' + titlejsselector + ' div').remove();
            $('#' + titlejsselector + ' input').remove();

        } else {
            var data = {
                action : 'test_ajax_response',
                test_ajax_response_nonce : the_ajax_script.test_ajax_response_nonce,
                postID_from_ajax : the_ajax_script.postid_to_ajax,
                insert_name_ajax : insert_namex,
                title_ajax : title_shortcode
            };
            if (cacheObj.postID_from_ajax) {

                display(cacheObj.postID);

            } else {

                // Do your ajax call
                $.post(the_ajax_script.ajaxurl, data, function(response) {

                            _doing_ajaxx = false;
                            cacheObj.postID_from_ajax = response;
                            display(response);

                        });

            }

            function display(response) {

                $('#mydiv #frontend').next().slideToggle();
                $('#mydiv #' + titlejsselector)
                        .append(response
                                + "<input type='hidden' id='minimizebutton' value='Minimize'>");
                SyntaxHighlighter.highlight();

                $('.toolbar').remove();

            }
        }
    });

});

缓存AJAX响应无效

2 个答案: