jsonp のcallbackを非同期で直列処理するためのハック
http://blog.toshimaru.net/jquery-ajaxdeferredajax/
view source
JavaScript
var url;
var id = '1JjdrGuKQGUORuCeMZf2TpdIzOI6duyMgLl3lT8ii1QA';
var callback_url = 'https://spreadsheets.google.com/feeds/list/' + id + '/od6/public/values?alt=json-in-script&callback=callback';
var gids = [
'1',
'2',
];
var appendScript = function(gid){
var callback_url_gid = callback_url.replace(/\/od6\//, '/'+gid+'/');
var script = document.createElement('script');
script.src = callback_url_gid;
document.body.appendChild(script);
console.log(callback_url_gid);
}
var loadNext = function(){
var gid = gids.shift();
if(!gid){return;}
appendScript(gid);
}
loadNext();
var callback = function(json){
var context = {
title : json.feed.title,
entry : json.feed.entry
};
var template = Hogan.compile($('#input').html());
var output = template.render(context);
$('#output').append(output);
console.log(json);
loadNext();
}
CSS
HTML
ページのソースを表示 : Ctrl+U , DevTools : F12
view-source:https://hi0a.com/demo/-js/js-ajax-sync-callback/
ABOUT
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。