jQuery variable scope-variable不更改其值

Question

我有一些代码，其中我将变量定义为某个值，但在ajax请求期间，必须更改该值。当我发出警报以检查值是否已更改时，变量仍然具有旧值。有问题的变量是"action"。请看一下：

$(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>");
        });
    }
});