[程設雜筆] $.getJSON() 原來是 Asynchrounous

一般來說,如果網站有少量的static資料的話,可以選擇放在.json檔裡面,要讀或要動態改變html的內容,都很方便。今天寫程式的時候,剛好就要使用這項技術。不過寫到一半,遇到了一個小問題,讓我debug了一段時間。


先上程式:

[code language=”javascript”]
var str=”;
$.getJSON(‘data.json’,function(data){
arr.forEach(function(value){
str+=data[value];
}
console.log(str); // ‘123123123123’
});
console.log(str); // ”
$(‘.xxxx’).html(str);
[/code]

問題發生在我要用jquery去更改html某個元素的值的時候,發現竟然是更改成空字串。於是就開始到處寫console.log。一開始以是我的json file內容寫錯了,因為他如果寫錯的話,不會跳lint,它就只是個json file。後來弄了好一段時間,終於被我發現$.getJSON() 原來是 asynchrounous,也就是我在做html()的時候,其實字串還沒做更改!

解決辦法如下:

[code language=”javascript”]
var str=”;
$.getJSON(‘data.json’,function(data){
arr.forEach(function(value){
str+=data[value];
}
$(‘.xxxx’).html(str);
});
[/code]

或者也有其它解法:

[code language=”javascript”]
var str=”;
$.ajaxSettings.async = false;
$.getJSON(‘data.json’,function(data){
arr.forEach(function(value){
str+=data[value];
}
});
$(‘.xxxx’).html(str);
$.ajaxSettings.async = true;
[/code]

關於我:

我是沒一村,專長和興趣是程式、主動投資、科技商業模式。可以參考我的書單和比較熱門的文章:

分享:

Leave a Reply