2016-12-05 60 views
0

編輯:我的js代碼涉及異步,因此它實際完成init()完成執行前的ready方法中的第二個alert()。任何想法如何確保我的第二個alert()在init()之後執行?先謝謝你。由於異步,Js代碼不會按順序運行

var notes = [];  
$(document).ready(function() { 
    //var notes = []; 
    alert("before " + notes.length); 
    init(); 
    alert("after " + notes.length) 
    //execute(notes, 0); 

}); 


function init() { 
    loadJSON(function(response) { 
    // Parse JSON string into object 
    var actual_JSON = JSON.parse(response); 
    var len = actual_JSON.notes.length; 
    //alert("length is " + len); 

    for(var i = 0; i < 6; i++) { 
     notes.push(actual_JSON.notes[i]); 
    } 
    //alert("after for loop " + notes.length); 


}); 
} 

function loadJSON(callback) { 

    var xobj = new XMLHttpRequest(); 
    xobj.overrideMimeType("application/json"); 
    xobj.open('GET', 'test.json', true); 
    xobj.onreadystatechange = function() { 
    if (xobj.readyState == 4 && xobj.status == "200") { 
     callback(xobj.responseText); 
    } 
}; 
    xobj.send(null); 
} 
+3

JavaScript是單線程的。你的代碼是無效的(有語法錯誤),所以我們不能告訴你實際發生了什麼。你可能也已經減少了你的例子太多。您的代碼可能包含一些異步部分。這個問題可能有助於瞭解發生了什麼的一般想法:http://stackoverflow.com/q/14220321/218196。 –

+2

'做一些可能需要時間的事情 - 聽起來像它甚至可能是異步的 –

+0

謝謝你指出。它是異步的。 – vkosyj

回答

0

使用承諾

var notes = [];  
$(document).ready(function() { 
    alert("before " + notes.length); 
    init() 
    .then(function(){ 
     alert("after " + notes.length) 
    }) 
    .catch(function(err){ 
     console.log('error in init()', err) 
    }); 
}); 


function init() { 
    return new Promise(function(resolve, reject) { 
    loadJSON(function(response) { 

     var actual_JSON = JSON.parse(response); 
     var len = actual_JSON.notes.length; 

     for(var i = 0; i < 6; i++) { 
      notes.push(actual_JSON.notes[i]); 
     } 

     resolve() 
    }); 
    }); 
} 

function loadJSON(callback) { 
    var xobj = new XMLHttpRequest(); 
    xobj.overrideMimeType("application/json"); 
    xobj.open('GET', 'test.json', true); 
    xobj.onreadystatechange = function() { 
    if (xobj.readyState == 4 && xobj.status == "200") { 
     callback(xobj.responseText); 
    } 
}; 
    xobj.send(null);