Question

我正在寻找一种解决方案，以确保我创建的三个函数在第一个完成后按顺序执行。

目前我有类似的东西似乎根本不起作用。

$(document).ready(function() {
    $.when(runPending(selectedYear, name)).then(runApproved(selectedYear,name)).then(runRejected(selectedYear,name));

});


function runPending(year, name){
    var deferred = new jQuery.Deferred();
    $.getJSON(URL, function() {
    }).done(function(json) {
        if(json.length == 0){
            console.log("No Data came back!");
        }
        else{
            //do stuff set to html_output_pending;

            $('#display').append(html_output_pending);
            }//end else

    }).fail(function(xhr, status, error) {
        alert(xhr.responseText);
    });
    return deferred.promise();
}

function runApproved(year, name){
    var deferred = new jQuery.Deferred();
    $.getJSON(URL, function() {
    }).done(function(json) {
        if(json.length == 0){
            console.log("No Data came back!");
        }
        else{
            //do stuff set to html_output_pending;

            $('#display').append(html_output_pending);
            }//end else

    }).fail(function(xhr, status, error) {
        alert(xhr.responseText);
    });
    return deferred.promise();
}

function runRejected(year, name){
    var deferred = new jQuery.Deferred();
    $.getJSON(URL, function() {
    }).done(function(json) {
        if(json.length == 0){
            console.log("No Data came back!");
        }
        else{
            //do stuff set to html_output_pending;

            $('#display').append(html_output_pending);
            }//end else

    }).fail(function(xhr, status, error) {
        alert(xhr.responseText);
    });
    return deferred.promise();
}

如何确保一旦runPending完成并将其数据附加到div元素#display，则执行第二个函数以便执行第三个函数。

对此的任何帮助将不胜感激！

谢谢。

Answer 1

Javascript函数按顺序运行，所以：

$(function() {
   runPending(selectedYear, name);
   runApproved(selectedYear, name);
   runRejected(selectedYear, name);
}

工作得很好。如果您的runPending，runApproved和runRejected函数更复杂，以至于它们正在调用异步功能，那么它们应该返回promises（jQuery和$ q稍微不同地实现它们）。这是你的承诺链接（当时，然后......）是合适的。

如果您已更新$.getJson，则可以执行以下操作：

$(function() {
   $.when(runPending(selectedYear, name))
   .then(runApproved(selectedYear, name))
   .then(runRejected(selectedYear, name));
}

function runPending(x,y){
    return $.getJson(someUrl).done(function(stuff) {
        $('#display').append(stuff);
    }
}

function runApproved(x,y){
    return $.getJson(someOtherUrl).done(function(stuff) {
        $('#display').append(stuff);
    }
}

function runRejected(x,y){
    return $.getJson(someThirdUrl).done(function(stuff) {
        $('#display').append(stuff);
    }
}

如果您正在执行的操作非常耗费流程，以致done处理程序可能需要比以下请求/ done处理程序更长的时间，您可以执行以下操作：

$(function() {
   $.when(runPending(selectedYear, name))
   .then(runApproved(selectedYear, name))
   .then(runRejected(selectedYear, name));
}

function runPending(x,y){
    var deferred = new $.Deferred();

    $.getJson(someUrl).done(function(stuff) {
        $('#display').append(stuff);
        deferred.resolve('success');
    }

    return deferred.promise();
}

function runApproved(x,y){
    var deferred = new $.Deferred();

    $.getJson(someOtherUrl).done(function(stuff) {
        $('#display').append(stuff);
        deferred.resolve('success');
    }

    return deferred.promise();
}

function runRejected(x,y){
    var deferred = new $.Deferred();

    $.getJson(someThirdUrl).done(function(stuff) {
        $('#display').append(stuff);
        deferred.resolve('success');
    }

    return deferred.promise();
}

如何在JavaScript中按顺序运行函数？

1 个答案: