Question

我有以下代码，由于一些奇怪的原因，事件发生的顺序对我来说没有意义。无论如何，我可以做到这一点，以便它按顺序进行？

var vm_good = false;
console.log("Before", vm_good);
    $.post("./ajax/call_price", {id: product_id}, function(data){
        $.each(data, function(key, value){
           $(".unit-price span").html(value);
        });
        vm_good = true;
        console.log("Inside", vm_good);
        enableNext();
    }, 'json');
    console.log("After", vm_good);

控制台窗口上的结果是

>Before false
>After false
>Inside true
>window.vm_good // I called it manually after the page loaded
>>true

Answer 1

.post()是一个异步请求。这意味着JS不会等待它完成，它只是继续下一个指令。

您需要将console.log("After", vm_good);放在帖子回调中，如下所示 -

var vm_good = false;
console.log("Before", vm_good);
    $.post("./ajax/call_price", {id: product_id}, function(data){
        $.each(data, function(key, value){
           $(".unit-price span").html(value);
        });
        vm_good = true;
        console.log("Inside", vm_good);
        enableNext();

        console.log("After", vm_good); // you should put this here
    }, 'json');

Answer 2

$.post是$.ajax的简写。 AJAX中的A代表异步，因此解释器将执行下一个命令，而$.post将在您的请求完成时运行您的事件处理程序（function(data)）。如果您的请求不是异步的，那么您的浏览器将会冻结，因为它会等待您的请求完成。

您可以在请求完成后使用$.when(deffered).then(handler)执行代码：

var callPrice = $.post("./ajax/call_price", {id: product_id}, function(data){
    $.each(data, function(key, value){
       $(".unit-price span").html(value);
    });
    vm_good = true;
    console.log("Inside", vm_good);
    enableNext();
}, 'json');

$.when(callPrice).then(function () {
    console.log("After", vm_good);
});

$ .post之后的jQuery事件在请求完成之前发生

2 个答案: