緩存Ajax響應不工作

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(); 

    } 

}); 


}); 

但是，我經過與螢火蟲，但仍在發佈請求到服務器，而不是使用緩存的結果。

上面的代碼是這樣工作的。用戶將首先點擊該鏈接，然後將結果（來自AJAX響應）顯示給服務器。用戶可以通過再次點擊鏈接來最小化結果。這是第二次點擊。最小化按鈕將刪除結果。如果用戶再次單擊該鏈接以再次查看結果，我不喜歡再次請求服務器，而是使用第一次單擊的緩存結果。

在上面的代碼中需要更改什麼？感謝您的任何提示。

更新：我還注意到，當用戶最小化結果時，緩存變量cacheObj.postID_from_ajax在第二次單擊時被銷燬（或變爲空）。因此，在第三次點擊中，此緩存變量不能再使用，因爲它的空值。

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(); 

      } 
     } 
    }); 

});