程式設計雜筆

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

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


先上程式:

var str='';
$.getJSON('data.json',function(data){
    arr.forEach(function(value){
        str+=data[value];
    }
    console.log(str);  // '123123123123'
});
console.log(str);     // ''
$('.xxxx').html(str);

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

解決辦法如下:

var str='';
$.getJSON('data.json',function(data){
    arr.forEach(function(value){
        str+=data[value];
    }
    $('.xxxx').html(str);
});

或者也有其它解法:

var str='';
$.ajaxSettings.async = false;
$.getJSON('data.json',function(data){
    arr.forEach(function(value){
        str+=data[value];
    }
});
$('.xxxx').html(str);
$.ajaxSettings.async = true;

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s