我在通过一个函数组合某些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之前,构建盒子的函数似乎还没有完成。
有没有办法让它在继续之前完成一个像buildErrandBox(0)这样的函数的执行?
发布于 2013-01-21 16:47:03
如果希望在继续之前完成AJAX函数,请将[ async ]选项设置为false
$.ajax({
url: 'db/buildErrandBox.inc.php',
type:'POST',
dataType: 'json',
async: false, // <-- add this line
...
这将阻止下一条语句的进一步执行,直到返回结果(或超时)。
Documentation
发布于 2013-01-21 16:35:08
这是因为ajax是asynchronous
..当调用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-21 16:41:42
在做这样的异步请求时,你应该考虑使用jQuery延迟。
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/
https://stackoverflow.com/questions/14434827
复制相似问题