jQuery變量作用域 - 變量不會改變其值

Question

我有一些代碼，我定義一個變量是一個特定的值，但是，然後，在ajax請求期間，該值必須改變。當我提醒檢查該值已更改時，該變量仍具有舊值。所討論的變量是'行動'。請看看：

$(function(){ 
    var $action; //this one is the problem 
    var $mod; 

    $(".main-nav li > a").click(function(){ 
     $(this).parent().siblings().find(".inner-nav").hide(); 
     $(this).parent().siblings().children("a").attr("id",""); 

     if ($(this).attr('id')=='nav-active') 
     { 
      $(this).attr('id',''); 
     } 
     else 
     { 
      $(this).attr('id','nav-active'); 
     } 

     $(this).parent().find(".inner-nav").toggle(); 
    }); 

    $(".main-nav li .inner-nav li a").click(function(){ 
     $(this).parent().siblings().find("a").attr("id",""); 
     $(".main-nav .inner-nav li a").attr("id",""); 

     $(this).attr('id','nav-active'); 

     // ajax 

     var rel = $(this).attr("rel"); 
     var rel_arr = rel.split(','); 

     $action = rel_arr[0]; //first change of value 
     $mod = rel_arr[1]; 

     $.ajax({ 
      url: 'ajaxLoad.php?action='+$action+'&mod='+$mod, 
      method: 'GET', 
      success: function(response) { 
       $(".content div").html(""); 

       $action = response.ajax.action; //second change of value 
       $mod = response.ajax.mod; 

       $.each(response.data, function(id, product){ 
        $(".content > div").append("<div>"+product.name+"</div>"); 
       }); 
      } 
     }); 

     alert ($action); //prints out the first value 

     // Set document title 
     var parentClass = $(this).parent().parent().parent().find("a").html(); 
     document.title = parentClass + " :: " + $(this).html(); 
    }); 
}); 

Answer 1

Ajax請求是異步完成的，因此控制權立即返回到您的腳本。在ajax請求已啓動啓動之後，但在ajax完成之前，在$.ajax呼叫之後運行的代碼。如果你想在ajax完成後運行一些東西，你必須把它放在你的成功回調中。

Answer 2

我找到了解決方案。這與乍得的貢獻有關，說問題在於異步完成請求。爲了解決這個問題，我必須做到以下幾點：

$.ajax({ 
    async: false, //add this 
    cache: false, //and this 
    url: 'ajaxLoad.php?action='+$action+'&mod='+$mod, 
    method: 'GET', 
    success: function(response) { 
     $(".content div").html(""); 

     $action = response.ajax.action; 
     $mod = response.ajax.mod; 

     $.each(response.data, function(id, product){ 
      $(".content > div").append("<div>"+product.name+"</div>"); 
     }); 
    } 
});