Question

我遇到了这个看似简单的问题，但我找不到正确的执行方式。

我有2个选择标签，第一个是COLOR，第二个是SIZE。第二个依赖于第一个。

为了检索产品的价格（来自数据库），我打算在另一个函数中调用一个函数。代码如下所述。

    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);
    }

警告是检查要在下一个函数上传递的调用值是否正确。

代码正在运行，但返回不同的结果。似乎函数checksizes（）传递的值来自前一个select（来自大小）。它甚至在完成执行之前调用第二个函数：$（＆＃34;＃sizediv＆＃34;）。load（＆＃39; sizes.php？id =＆＃39; + id +＆＃39;＆amp;颜色=＆＃39 +颜色）;

非常感谢帮助。谢谢！

Answer 1

load函数是一个异步函数。当函数“finneshed”时并不意味着结果被加载。你需要完成回调。见http://api.jquery.com/load/

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);
    });
}

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

Answer 2

那是因为.load()是异步的。它基本上要求另一个线程继续工作，而调用代码继续它正在做的事情。如果你有代码需要响应.load()那么它需要放在一个回调函数中，而不是放在函数之后。像这样：

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);
    });
}

将此函数作为参数传递给.load()将在.load()完成后调用此函数。

Answer 3

从jQuery文档开始，$.load在返回之前确实没有完成。您应该使用回调函数：

$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

http://api.jquery.com/load/

在您的情况下，checksizes函数调用下的load函数中的所有内容都应放在回调中。

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

3 个答案: