jquery - ajax代碼行爲不正確

Question

我想知道我的代碼有什麼問題？這只是不正確。語法對我來說很好 - 基本上，如果在加載的頁面上存在名爲「map_canvas」的div，則應調用名爲initialize_google_maps的函數。

但是即使map_canvas div在頁面上不存在，有時也會調用initialize_google_maps函數。更具體地說 - 即使沒有map_canvas存在，它始終被稱爲第一次單擊鏈接，然後它的行爲正確。

$(document).on("ready", function(){ 

console.log('load ajax when document starts'); 
    var ajax_loaded = (function(response) {   

    $(".page-content") 

    .html($(response).filter(".page-content"));  

    $(".page-content .ajax").on("click",ajax_load); 


    }); 


//the function below is called by links that are described with the class 'ajax', or are in the div 'menu' 

var history = [];     

var current_url_method;    

var ajax_load = (function(e) { 


console.log('load ajax on clicks');   
    e.preventDefault();    


    history.push(this);    
    var url =$(this).attr("href");   
    var method = $(this).attr("data-method"); 

    if (current_url_method != url + method) { 
    console.log('url + method'); 
    current_url_method = url + method;  

    $.ajax({     
     "url": url,    
     "type": method,       
     "success": ajax_loaded,   
    }); 
    } 

    if ($("#map_canvas").length > 0) 
    { 
     console.log('ajax 2 - map_canvas is detected'); 
     initialize_google_maps(); 

    } 


}); 



$("#menu a").on("click",ajax_load); 
$(".ajax").on("click",ajax_load); 
$("#menu a.main").trigger("click"); 
$(".search-box form").on("submit", form_submit); 

}); 

Answer 1

.ajax默認爲異步。所以基本上，在您返回ajax響應之前，ajax調用之後的代碼（您在檢查$("#map_canvas").length的地方）會被執行。

$.ajax({     
     "url": url,    
     "type": method,       
     "success": ajax_loaded   
    }); 

快速的解決方案是讓Ajax調用同步：

$.ajax({     
    url: url,    
    type: method, 
    async: false,      
    success: ajax_loaded  
}); 

警告： Syncronous電話是非常討厭和鎖定瀏覽器，更好的解決辦法是在執行$("#map_canvas").length檢查ajax對象的響應並保持調用異步。

$.ajax({     
    url: url,    
    type: method, 
    async: true,      
    success: function(){ 
    //Running your secondary checks here will ensure that they 
    // are executed only when the Ajax object has finished what it has to do. 
    }  
});