使用回调使两个函数运行一个接一个

Question

在下面的代码中，我试图在 ajax_call 完成后运行 loop_the_table 函数。我的代码是：

function ajax_and_loop(){    

      ajax_call(function(){ loop_the_table();});
}    
   function ajax_call(callback){

     $(document).ready(function(){
         $.getJSON('php_side.php', function(data) {
           $(data).each(function(key, value) {
               value = value.toString();
               res = value.split(',');
               array_of_people_already_suscribed[row][column++] = res[0];
               array_of_people_already_suscribed[row][column++] = res[1];
               array_of_people_already_suscribed[row][column] = res[2];
               row++;
               column = 0;
           });
         });
         if (typeof callback === "function") {
         callback();
         }
       });
     }

       function loop_the_table(){
          console.log("The row is "+row);
         for(var i = 0; i < row; i++){

                   console.log("kalispera oli mera");
             console.log(array_of_people_already_suscribed[i][0]);
             console.log(array_of_people_already_suscribed[i][1]);
             console.log(array_of_people_already_suscribed[i][2]);
           }  
        }

Cosnidering ajax_and_loop 从 index.html 调用，代码有什么问题？（它不会在调用 loop_the_table 之前完成第一个 ajax_call 函数）

Answer 1

将callback()移动到$.getJSON()

function ajax_and_loop(){    

      ajax_call(function(){ loop_the_table();});
}    
   function ajax_call(callback){

     $(document).ready(function(){
         // getJSON is an async function, it will not finish before your code continues
         // executing.
         $.getJSON('php_side.php', function(data) {
           $(data).each(function(key, value) {
               value = value.toString();
               res = value.split(',');
               array_of_people_already_suscribed[row][column++] = res[0];
               array_of_people_already_suscribed[row][column++] = res[1];
               array_of_people_already_suscribed[row][column] = res[2];
               row++;
               column = 0;
           });
           // place callback HERE in order to fire after the async function has finished.
         });
         // Placing callback here does not work as intended because the callback is called
         // before your async function finished executing.
         if (typeof callback === "function") {
         callback();
         }
       });
     }

       function loop_the_table(){
          console.log("The row is "+row);
         for(var i = 0; i < row; i++){

                   console.log("kalispera oli mera");
             console.log(array_of_people_already_suscribed[i][0]);
             console.log(array_of_people_already_suscribed[i][1]);
             console.log(array_of_people_already_suscribed[i][2]);
           }  
        }

Answer 2

what is wrong with the code? (It does not finish first ajax_call function before calling loop_the_table as it is)

您在收到 data - $.getJSON is asynchronously 调用其回调之前正在执行 callback()。您需要将 callback() 调用移动到 $.getJSON 回调中。

不过 return 函数的承诺会好得多：

function ajax_and_loop(){
    $(document).ready(function(){
        ajax_call().then(loop_the_table);
    });
}    
function ajax_call(callback){
    return $.getJSON('php_side.php').then(function(data) {
        var array_of_people_already_suscribed = […];
        $(data).each(function(key, value) {
            var res = value.toString().split(',');
            var column = 0;
            array_of_people_already_suscribed[row][column++] = res[0];
            array_of_people_already_suscribed[row][column++] = res[1];
            array_of_people_already_suscribed[row][column] = res[2];
            row++;
        });
        return array_of_people_already_suscribed;
    });
}

function loop_the_table(array_of_people_already_suscribed) {
    var row = array_of_people_already_suscribed.length;
    console.log("The row is "+row);
    for (var i = 0; i < row; i++){
        console.log("kalispera oli mera");
        console.log(array_of_people_already_suscribed[i][0]);
        console.log(array_of_people_already_suscribed[i][1]);
        console.log(array_of_people_already_suscribed[i][2]);
    }
}

使用回调使两个函数运行一个接一个

Make two functions run one after the other using callback

javascript

callback

使用回调使两个函数 运行 一个接一个

Make two functions run one after the other using callback

javascript

callback

使用回调使两个函数运行一个接一个