تماس های تو در تو

تماس های تو در تو

setTimeout( function request(..){
// ..
}, 500) ;

سپس هنوز بعد، ما:

ajax( “..”, function response(..){
// ..
} );

و در نهایت (بیشتر بعد)، ما

if ( .. ) {
// ..
}

else ..

اما چندین مشکل با استدلال در مورد این کد به صورت خطی به این شکل وجود دارد.

اولاً این تصادفی از مثال است که مراحل ما در خطوط بعدی (1، 2، 3، و 4…) است. در برنامه‌های async JS واقعی، اغلب نویزهای بیشتری وجود دارد که همه چیز را به هم می‌ریزد، نویزهایی که باید به طرز ماهرانه‌ای در مغزمان مانور دهیم و از یک عملکرد به عملکرد دیگر پرش کنیم. درک جریان ناهمگام در چنین کدهای دارای تماس غیرممکن نیست، اما مطمئناً حتی با تمرین زیاد، طبیعی یا آسان نیست.

اما همچنین، اشتباه عمیق تری وجود دارد، که فقط در آن مثال کد مشخص نیست. اجازه دهید سناریوی دیگری (شبه کد) برای نشان دادن آن بسازم:

doA( function(){
doB();

doC( function(){
doD();
} )
doE();
} );
doF();

در حالی که افراد باتجربه در میان شما ترتیب واقعی عملیات را در اینجا به درستی تشخیص می دهند، شرط می بندم که در نگاه اول کمی گیج کننده است و رسیدن به آن به چرخه های ذهنی هماهنگ نیاز دارد. عملیات به ترتیب زیر انجام می شود:

• doA()
• doF()
• doB()
• doC()
• doE()
• doD()

اولین باری که به کد نگاه کردید درست متوجه شدید؟

خوب، برخی از شما فکر می کنید که من در نامگذاری عملکردم بی انصافی کردم تا عمداً شما را به بیراهه بکشانم. قسم می خورم که فقط به ترتیب ظاهر از بالا به پایین نام می بردم. اما اجازه دهید دوباره تلاش کنم:

doA( function(){
doC();

doD( function(){
doF();
} )
doE();
} );
doB();

اکنون، من آنها را بر اساس حروف الفبا به ترتیب اجرای واقعی نامگذاری کرده ام. اما من هنوز شرط می بندم، حتی با تجربه ای که اکنون در این سناریو دارم، ردیابی از طریق ترتیب A -> B -> C -> D -> E -> F برای بسیاری از شما خوانندگان طبیعی نیست. مطمئناً چشمان شما به شدت از قطعه کد بالا و پایین می پرند، درست است؟

اما حتی اگر همه چیز برای شما طبیعی باشد، باز هم یک خطر دیگر وجود دارد که می تواند ویران کند. آیا می توانید متوجه شوید که چیست؟

اگر doA(..) یا doD(..) واقعاً همانطور که ما آشکارا فرض می‌کردیم غیرهمگام نباشند، چه؟ اوه اوه، اکنون ترتیب متفاوت است. اگر هر دو همگام هستند (و شاید فقط گاهی اوقات، بسته به شرایط برنامه در آن زمان)، ترتیب اکنون A -> C -> D -> F -> E -> B است.

صدایی که به‌تدریج در پس‌زمینه شنیدید، آه‌های هزاران توسعه‌دهنده JS است که به تازگی لحظه‌ای با چهره‌ای در دست داشتند.

آیا مشکل لانه سازی است؟

آیا این همان چیزی است که ردیابی جریان ناهمگام را بسیار سخت می کند؟ این بخشی از آن است، مطمئنا.

اما اجازه دهید مثال رویداد تودرتو/تایم اوت/آژاکس قبلی را بدون استفاده از تودرتو بازنویسی کنم:

listen( “click”, handler );
function handler() {
setTimeout( request, 500 );
}

function request(){
ajax( “http://some.url.1”, response );
}

function response(text){
if (text == “hello”) {
handler();
}

else if (text == “world”) {
request();
}
}

این فرمول کد به سختی به اندازه مشکلات تودرتو/تورفتگی شکل قبلی آن قابل تشخیص نیست، و با این حال به همان اندازه مستعد “جهنم پاسخ به تماس” است. چرا؟