将函数与Javascript和JQuery结合起来

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功能，然后再继续完成，设置异步选项假：

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

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

Documentation

Answer 2

这是因为阿贾克斯是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 3

你应该看看使用jQuery Deferred的时候做这样的异步请求。

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

这将确保该请求是完整和调用next函数之前返回。

其他递延资源：

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

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

Answer 4

你必须确保你所有的Ajax调用已经完成，然后你应该尝试进一步处理服务器阶跃响应。