如何在执行上一个代码后在javascript函数中调用另一个javascript函数？

Question

I got this seemingly simple problem, yet I cannot find the correct way of execution.

I have 2 select tags, the first one is COLOR and the second one is SIZE. The second one is dependent on the first one.

To retrieve the price of the products (which is from the database), I intend to call a function within another function. The code stated below.

    function checksizes(id)
    {
    var color=document.getElementById('colors').value;
    $("#sizediv").show();
    $("#sizediv").load('sizes.php?id='+id+'&color='+color);
    var size = document.getElementById('size2').value;
    alert(id+size+color);
    confirmprice2(id,size,color);
    }

    function confirmprice2(id,size)
    {
    $("#price").show();
    $("#price").load('price.php?id='+id+'&size='+size);
    }

The alert is to check whether the invoked values to be passed on the next function are correct.

Code is working, but returning different results. It seemed that the function checksizes() passes values which are from the previous select (from the size). It calls the second function even before it finishes executing this: $("#sizediv").load('sizes.php?id='+id+'&color='+color);

Help is much appreciated. Thank you!

Answer 1

That's because .load() is asynchronous. It basically forks off another thread to continue its work while the calling code continues what it was doing. If you have code which needs to happen in response to .load() then it needs to be placed in a callback function, not after the function. Something like this:

function checksizes(id) {
    var color=document.getElementById('colors').value;
    $("#sizediv").show();
    $("#sizediv").load('sizes.php?id='+id+'&color='+color, function () {
        var size = document.getElementById('size2').value;
        alert(id+size+color);
        confirmprice2(id,size,color);
    });
}

Passing this function as a parameter to .load() will invoke this function after .load() completes.