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

我找到了解决方案。这与Chad的贡献有关，即问题在于异步完成请求。要解决这个问题，我必须执行以下操作：

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

jQuery变量scope - 变量不会更改其值

2 个答案: