Question

我在通过一个函数组合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）这样的函数？

Answer 1

这是因为调用警报时ajax是asynchronous .. 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
             }
 });
}

Answer 2

在执行像这样的异步请求时，你应该看一下使用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/

Answer 3

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

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

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

Documentation

Answer 4

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

将功能与Javascript和JQuery相结合

4 个答案: