0

我在通过一个函数组合 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); }
});
}

这三个单独的功能在使用网页上的按钮时起作用。首先点击开始新的差事。改变它是什么类型的差事。放一些笔记。并保存差事。一切正常。

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

但是当我像下面这样结合这些时

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

errandID 变为未定义。有任何想法吗？

更新！

当我在功能开始时收到警报时，它就起作用了。在尝试使用 errandID 之前，似乎构建盒子的功能还没有完成。有两个警报，第二个得到 errandID。

有没有办法让它在继续执行之前完成像 buildErrandBox(0) 这样的功能？

4

4 回答 4

0

这是因为 ajaxasynchronous在调用 alert 时是 ..。ajax 函数尚未执行.....您可以修复它的一种方法是在buildErrandBox(0).. 的 ajax 成功函数之后重新排列函数并调用其他函数，这样我们可以确保仅在buildErrandBox()执行后调用另一个函数

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
             }
 });
}
于 2013-01-21T08:35:07.717 回答
0

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

http://api.jquery.com/jQuery.Deferred/

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

其他延期资源：

http://addyosmani.com/blog/digging-into-deferreds-1/

http://net.tutsplus.com/tutorials/javascript-ajax/wrangle-async-tasks-with-jquery-promises/

于 2013-01-21T08:41:41.660 回答
0

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

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

这将阻止下一条语句的进一步执行，直到返回结果（或超时）。

文档

于 2013-01-21T08:47:03.263 回答
-1

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

于 2013-01-21T08:45:18.577 回答