将函数与Javascript和JQuery相结合

我在通过一个函数组合som javascript函数时遇到问题。我正在尝试建立一个小的系统来在工作中展示。这是一种展示如何改进的方式。不适用于部署

函数如下所示

// To choose an errand or with a zero start a new errand. 
function buildErrandBox(number)
{
$.ajax({
    url: 'db/buildErrandBox.inc.php',
    type:'POST',
    dataType: 'json',
    data: { customerNumber: $("#customerNumber").val(), errandNumber: number },
    success: function(build){ $('#newErrandsBoxResult').empty(); $('#newErrandsBoxResult').append(build.buildForm); $('#newErrandsBoxTextResult').empty(); $('#newErrandsBoxTextResult').append(build.buildText); showMinorContent('#newErrands'); $('#errandArea').val(build.area); $('#errandGroup').val(build.group); $('#errandType').val(build.type); escalateOptions(); getEscalationGroups(); },
    error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); }
});
}

// To save changes on a errand. 
function saveErrand()
{
$.ajax({
    url: 'db/saveErrandsForCustomer.inc.php',
    type:'POST',
    dataType: 'json',
    data: { id: $("#errandID").val(),
            telephone: $("#errandTelephoneNumber").val(),
            email: $("#errandEmail").val(),
            area: $("#errandArea").val(),
            group: $("#errandGroup").val(),
            type: $("#errandType").val()
    },
    success: function(output_string){ showCustomerErrands(); },
    error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); }
});
}

// To save a new note on an errand. 
function saveTextForErrand()
{
$.ajax({
    url: 'db/saveErrandsText.inc.php',
    type:'POST',
    dataType: 'json',
    data: { id: $("#errandID").val(), text: $("#newTextForErrandTextArea").val() },
    success: function(output_string){ buildErrandBox($("#errandID").val()); },
    error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); }
});
}

当用户使用网页上的按钮时，这是三个独立的功能。首先单击以开始新的差事。改变它是什么类型的差事。写一些笔记。并保存差事。一切正常

在后台，build errad函数构建整个输入框，并选择显示差事。但下一个保存差事的函数会识别差事编号并将差事保存在数据库中

但当我像下面这样组合这些

function preMadeErrand(area, group, type, text, servicetext)
{
buildErrandBox(0); 
alert($("#errandID").val());
$('#errandArea').val(area);
changeErrandBoxes();
$("#errandGroup").val(group);
changeErrandBoxes();
$("#errandType").val(type);
$("#newTextForErrandTextArea").val(servicetext);
saveTextForErrand();
$("#newTextForErrandTextArea").val(text);
saveTextForErrand();
alert($("#errandID").val());

saveErrand();
}

错误变得不明确。有什么想法吗

更新

当我在函数开始时收到警报时，它就工作了。似乎在它尝试使用错误代码之前，构建长方体的功能还没有完成。有两个警报，第二个就完成了任务

---

有没有办法让它在继续之前完成一个函数，比如builderAndBox（0）？

这是因为ajax是异步的。。调用警报时。ajax函数尚未执行。。。。。解决此问题的一种方法是在

buildernadbox（0）

的ajax成功函数之后，重新安排函数并调用其他函数。。这样，我们可以确保只有在执行

builderAndBox（）

之后才调用另一个函数

function buildErrandBox(number)
{
  $.ajax({
    url: 'db/buildErrandBox.inc.php',
    type:'POST',
    dataType: 'json',
    data: { customerNumber: $("#customerNumber").val(), errandNumber: number },
    success: function(build){ 
                //your stuff.. 
                alert($("#errandID").val());
                $('#errandArea').val(area);
                changeErrandBoxes();
                ...
                saveTextForErrand();
                .........
                // function you want to execute here
             },
    error: function (xhr, ajaxOptions, thrownError) { 
               //your stuff
             }
 });
}

---

在执行类似这样的异步请求时，您应该考虑使用jQuery-Deferred

// To choose an errand or with a zero start a new errand. 
function buildErrandBox(number)
{
$.ajax({
    url: 'db/buildErrandBox.inc.php',
    type:'POST',
    dataType: 'json',
    data: { customerNumber: $("#customerNumber").val(), errandNumber: number },
    success: function(build){ $('#newErrandsBoxResult').empty(); $('#newErrandsBoxResult').append(build.buildForm); $('#newErrandsBoxTextResult').empty(); $('#newErrandsBoxTextResult').append(build.buildText); showMinorContent('#newErrands'); $('#errandArea').val(build.area); $('#errandGroup').val(build.group); $('#errandType').val(build.type); escalateOptions(); getEscalationGroups(); },
    error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); }
});
}

// To save changes on a errand. 
function saveErrand()
{
$.ajax({
    url: 'db/saveErrandsForCustomer.inc.php',
    type:'POST',
    dataType: 'json',
    data: { id: $("#errandID").val(),
            telephone: $("#errandTelephoneNumber").val(),
            email: $("#errandEmail").val(),
            area: $("#errandArea").val(),
            group: $("#errandGroup").val(),
            type: $("#errandType").val()
    },
    success: function(output_string){ showCustomerErrands(); },
    error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); }
});
}

// To save a new note on an errand. 
function saveTextForErrand()
{
$.ajax({
    url: 'db/saveErrandsText.inc.php',
    type:'POST',
    dataType: 'json',
    data: { id: $("#errandID").val(), text: $("#newTextForErrandTextArea").val() },
    success: function(output_string){ buildErrandBox($("#errandID").val()); },
    error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); }
});
}

这将确保在调用下一个函数之前完成并返回请求

其他递延资源：

---

您必须确保所有AJAX调用都已完成，然后您应该尝试进一步处理服务器响应。

如果希望在继续之前完成AJAX功能，请将async选项设置为false：

$.ajax({
    url: 'db/buildErrandBox.inc.php',
    type:'POST',
    dataType: 'json',
    async: false, // <-- add this line
    ...

$.ajax({
url:'db/buildernadbox.inc.php'，
类型：'POST'，
数据类型：“json”，
async:false，//AJAX中的
A
表示异步。