вызов функции после выполнения другой функции

Question

Я пытаюсь вызвать другую функцию после завершения загрузки(). Сначала я попытался проверить с помощью alert(), однако я вижу предупреждение перед загрузкой(). Я могу успешно загрузить контент в функции load(). Однако alert() пуст.

$(document).ready(function(){ 

    load(); 
    $.when(load()).done(function(){ 
     alert((document.getElementById('item').innerHTML)); 
    });   

    function load() 
    { 
     $("#item").load("/somepage.aspx", function (response, status, xhr){ 
       if (status == "error") { 
       var msg = "error: "; 
       $("#error").html(msg + xhr.status + " " + xhr.statusText); 
       } 
     });       
    }; 
}); 

Answer 1

Вы должны load() вернуть обещание, а затем передать это обещание $.when.

.load() не возвращает обещание, он возвращает коллекцию jQuery, на которую он был вызван (для цепочки). Вы можете переписать load() вместо $.get(), который возвращает jQXHR, который реализует Deferred (это класс обещаний jQuery).

var p = load(); 
$.when(p).done(function() { 
    alert($("#item").html()); 
}); 

function load() { 
    return $.get("/somepage.aspx", function (response, status, xhr){ 
     $("#item").html(response); 
     if (status == "error") { 
      var msg = "error: "; 
      $("#error").html(msg + xhr.status + " " + xhr.statusText); 
     } 
    }); 
} 

, Вам не нужно использовать $.when, вы можете просто написать:

p.done(function() { ... }); 

Answer 2

Вы можете использовать функции обратного вызова и обновить свой код к следующему

$(document).ready(function(){ 

    load(function(){ 
     alert((document.getElementById('item').innerHTML)); 
    }); 

    function load(callback) 
    { 
     $("#item").load("/somepage.aspx", function (response, status, xhr){ 
       if (status == "error") { 
       var msg = "error: "; 
       $("#error").html(msg + xhr.status + " " + xhr.statusText); 
       } 
       if(callback) { 
        callback(); 
       } 
     });       
    }; 
}); 

Answer 3

Вы можете использовать новый API Promises, который уже реализован в большинстве основных браузеров.

var jsonPromise = new Promise(function(resolve, reject) { 
    // do a thing, possibly async, then… 

    if (/* everything turned out fine */) { 
     resolve("Stuff worked!"); 
    } 
    else { 
     reject(Error("It broke")); 
    } 
}); 

jsonPromise.then(function(data) { 
    console.log(result); // "Stuff worked!" 
}, function(err) { 
    console.log(err); // Error: "It broke" 
});