JavaScript Calback非同期処理
9989 ワード
Callback
前回の記事では,同期処理と非同期処理の概念を理解した.同期処理は、基本的には、タスクのスタック後に1つずつ処理されるキューに似ています.非同期処理を同時処理方式のマルチタスク処理と理解すれば容易に理解できる.△音楽を聴いたり、ゲームをしたり、机を叩いたり...?では、JavaScriptでは、コードはどのように処理されているのでしょうか.
Calbackとは?
Calbackは以前の予科時に学んだ概念で、当時は함수의 인자로 전달되는 함수
しか知らなかった.これは、どのように動作するかを知っているから勉強したのではなく、関数オブジェクトの内部の値をマッピングするために関数に置いただけだと覚えています.(高次関数mapに渡される関数もコールバック関数であり、マッピングに用いられる.)
次の文章はstack overflowのある人からcallback関数を定義したというコメントです.
A callback function is a function which is:
1. passed as an argument to another function,
and, 2. is invoked after some kind of event.
直訳すると1.다른 함수의 전달인자로서 보내지는 함수
、2.어떤 이벤트에 의해서 불려지는 함수
です.この文は、関数オブジェクトの内部で使用され、イベントが発生したときに非表示にして使用されると理解できます.事件が起きた時にこの言葉を使うのはおかしいが、隠して外に置かないと全部読んでしまう.サンプルコードを作成します.これは非同期使用というよりは,コールバックの趣旨を理解するためである.let consoleInfo = (string, callback) => {
setTimeout(() => {
callback(text);
}, 3000);
}
consoleInfo("몬스터를 잡았습니다.",(text)=>{ console.log(text) });
面白くないとむやみに認めるしかし、その前にコードを見てみましょう.そんなふうに見送ったらどうなるんだろう.もちろん、3秒後にはコールバック関数に渡される文字列を制御します.一般的に書かれているものと何が違うのかと聞かれますが、最後の行の前に何かを書くと、事件が発生したときに順番に動くことができます.
コールバック関数を使用した条件イベントの処理
if(유저가 몬스터를 잡았을 때)
プレイヤーがモンスターを捕まえると、捕まえた3秒以内に、空き時間内に順番に特殊イベントが発生するように指定できます.settimeoutが停止している間、コールバック関数は他の場所でカウントされます.この時間は経験値の取得を通知するか、アップグレード後の通知を確認するか、さまざまな動作を作成できます.あるいはcallback関数自体を積み重ねて、時間の後に起こったことをソートすることもできます. const consoleInfo = (string, callback) =>{
setTimeout(
() => {
console.log(string);
callback();
},
100
)
}
const consoleInfoAll = () => {
if(유저가 레벨업을 했다){
consoleInfo("레벨업을 했습니다.", () => {
consoleInfo("경험치 10을 획득했습니다.", () => {
})
})
}
}
奇妙に見えるかもしれませんが、デフォルトでは、実行順序を強制し、関数の実行間隔を指定したり、内部条件文を使用してエラーをキャプチャしたり、特定のイベントに対応する関数の実行を強制したりすることができます.これは,遅延関数の実行だけでなく,タイマに基づいて処理をソートし,後で実行する関数をソートする.
コールバック関数を使用したエラー処理の設計
コールバック関数は、関数の実行順序または遅延時間を決定し、条件を使用してイベントをハンドル化できます.これは、エラー処理(例外処理)を状況を理解するエラーハンドル化ツールとして使用できることを示します.次のコードを見てください.const somethingGonnaHappen = callback => {
waitingUntilSomethingHappens()
//
if(isSomethingGood) {
callback(null, somthing);<
}
if(isSomethingBad) {
callback(something, null);<
}
}
コールバックとして挿入される関数については、受信データ、errの発生、またはerrの発生状況に一致するコードを記述することができる.内部ではerr,dataを伝達パラメータとして送信し,場合によってifキャプチャerrに分岐する. somethingGonnaHappen((err, data) => {
if(err) {
console.log('ERROR!!');
return;
}
return data;
});
callbackの内部を表示すると、次のように表示されます.通常、errは前の伝達パラメータとして、データは後の伝達パラメータとして送信される.習慣のようです.コールバックを使用する場合は、コードがこのように記述されていることを確認します.
コールバック関数の欠点
デフォルトではcallback関数を使用して非同期処理を行う場合、順序を満たすために関数を連続的に記述する必要があるという欠点があります.次の順序の関数をcallbackに渡し続ける必要があるため、非同期処理の複数の実行が混在している場合、次のような場合があります.
たとえば、Webアニメーションを開始する関数をcallback非同期処理として記述すると、矩形は徐々に大きくなり、1つの輪が複数の分割されたアニメーションに切り取られてコードに記述され、callbackは4つのセグメントに積み上げられます.(アニメーションの場合はキーフレームとして扱われますが、関数として記述されているとします.)この方法が数十回計画された実行である場合、callbackを使用すると、上記のcallback hellに遭遇する.では、他の方法を理解してみましょう.
Reference
この問題について(JavaScript Calback非同期処理), 我々は、より多くの情報をここで見つけました
https://velog.io/@brian_kim/JavaScript-Callback-비동기처리
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
let consoleInfo = (string, callback) => {
setTimeout(() => {
callback(text);
}, 3000);
}
consoleInfo("몬스터를 잡았습니다.",(text)=>{ console.log(text) });
if(유저가 몬스터를 잡았을 때)
const consoleInfo = (string, callback) =>{
setTimeout(
() => {
console.log(string);
callback();
},
100
)
}
const consoleInfoAll = () => {
if(유저가 레벨업을 했다){
consoleInfo("레벨업을 했습니다.", () => {
consoleInfo("경험치 10을 획득했습니다.", () => {
})
})
}
}
const somethingGonnaHappen = callback => {
waitingUntilSomethingHappens()
//
if(isSomethingGood) {
callback(null, somthing);<
}
if(isSomethingBad) {
callback(something, null);<
}
}
somethingGonnaHappen((err, data) => {
if(err) {
console.log('ERROR!!');
return;
}
return data;
});
Reference
この問題について(JavaScript Calback非同期処理), 我々は、より多くの情報をここで見つけました https://velog.io/@brian_kim/JavaScript-Callback-비동기처리テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol