解説
「同期処理」では、プログラムは書いたとおりの順番で実行されます。ある処理が終わったあと、次の処理に移り、順次処理が行われていきます。
「非同期処理」は、通信やファイルアクセスなど、時間の掛かる重い処理などで用いられる手法です。非同期処理では、重い処理は結果を待たずに次の処理に進みます。そうした時間差で実行される処理には、コールバック関数を指定しておきます。コールバック関数は、処理が終わった際に呼び出される関数です。
こうした手法を利用することで、いつ終わるか分からない処理を待たずに、処理を進めていくことができます。
サンプル
WikipediaのAPIを利用したJavaScriptのプログラムを掲載します。ファイルはUTF-8で保存してください。検証はGoogle Chromeで行なっています。
また、出力結果は、Webブラウザの開発者向けツール上で確認してください。Google Chromeでは、Windowsの場合は「F12」キー、Macの場合は「Command＋Option＋I」キーを押すと、デベロッパーツールが表示されるので、「Console」タブを選択します。
<html>
<head>
<title>「JavaScript」のサンプル</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<p>コンソールに結果を出力</p>
<script>
console.log('# 同期処理');
console.log('処理1');
console.log('処理2');
console.log('処理3');
console.log('');
console.log('# 同期処理');
console.log('処理1');
var p = $.param({
action: 'query',
list: 'search',
srsearch: 'abc',
srnamespace: 0,
srlimit: 10,
srprop: '',
format: 'json'
});
$.getJSON('http://ja.wikipedia.org/w/api.php?' + p + '&callback=?',
function(data) {
console.log('処理2');
console.log(JSON.stringify(
data.query.search.map(x => x.title)
, null, ' '));
}
);
console.log('処理3');
</script>
</body>
</html>
出力結果
# 同期処理 処理1 処理2 処理3 # 同期処理 処理1 処理3 処理2 [ "ABC", "ABCニュース", "ABCスタジオ", "ABCホール", "ABCマート", "機体記号", "フリーフォーム", "アメリカン・ブロードキャスティング・カンパニー", "篠山ABCマラソン大会", "ABCチャンピオンシップゴルフトーナメント" ]
