0

1 つの関数を使用していくつかの 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); }
});
}

これらは、Web ページのボタンを使用するときに機能する 3 つの個別の機能です。最初にクリックして、新しい用事を開始します。お使いの種類が変わります。いくつかのメモを入れてください。そして、用事を保存します。すべて正常に動作します。

バックグラウンドで、build errand 関数が入力のボックス全体をビルドし、選択して errand を表示します。しかし、用事を保存する次の関数は、用事番号を認識し、用事をデータベースに保存します。

しかし、これらを以下のように組み合わせると

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 を使用しようとする前に、ボックスを構築する機能が終了していないようです。2 つのアラートで、2 番目は errandID を取得します。

続行する前に buildErrandBox(0) のような 1 つの関数の実行を終了させる方法はありますか?

4

4 に答える 4

0

このような非同期リクエストを行う場合は、jQueryDeferredの使用を検討する必要があります。

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 に答える
0

これはasynchronous、アラートが呼び出されたときに ajax が .. であるためです。ajax関数はまだ実行されていません.....それを修正できる1つの方法は、関数を再配置して他の関数を呼び出すことです..のajax成功関数の後にbuildErrandBox(0)..このようにして、他の関数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 に答える
-1

すべての AJAX 呼び出しが終了したことを確認してから、サーバーの応答をさらに処理する必要があります。

于 2013-01-21T08:45:18.577 に答える