انتخاب رویکرد مناسب در برنامه نویسی ناهمگام جاوا اسکریپت — راهنمای جامع

۱۷ بازدید
آخرین به‌روزرسانی: ۸ شهریور ۱۴۰۲
زمان مطالعه: ۷ دقیقه

در آخرین بخش از این سری مقالات برنامه نویسی ناهمگام جاوا اسکریپت بررسی مختصری در خصوص تکنیک‌ها و قابلیت‌های مختلف کدنویسی داریم که در طی این دوره آموزش داده شده است. همچنین بررسی می‌کنیم که باید از کدام رویکردها استفاده کنیم و برخی توصیه‌ها و یادآوری‌ها در مورد تله‌های رایج ارائه شده‌اند.

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

Callback-های ناهمگام

Callback-ها عموماً در API-های به سبک قدیم مشاهده می‌شوند که در آن‌ها تابعی به عنوان پارامتر به تابع دیگر ارسال می‌شود و زمانی که یک عملیات ناهمگام تکمیل شد فراخوانی می‌شود و callback نیز به نوبه خود کاری روی نتیجه اجرا می‌کند. callback-ها تا قبل از promise-ها استفاده می‌شدند و کارایی و انعطاف مورد نیاز را نداشتند. بنابراین تنها در موارد ضرورت باید از آن‌ها استفاده کرد.

استفاده از Callback در موارد زیر مناسب است/نیست:

عملیات با تأخیر منفرد عملیات مکرر عملیات ترتیبی چندگانه عملیات همزمان چندگانه
خیر بله (callback-های بازگشتی) بله (callback-های تو در تو) خیر

نمونه کد

در ادامه مثالی را مشاهده می‌کنید که یک منبع را از طریق API به نام XMLHttpRequest بارگذاری می‌کند:

function loadAsset(url, type, callback) {
  let xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.responseType = type;

  xhr.onload = function() {
    callback(xhr.response);
  };

  xhr.send();
}

function displayImage(blob) {
  let objectURL = URL.createObjectURL(blob);

  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
}

loadAsset('coffee.jpg', 'blob', displayImage);

تله‌ها

  • Callback-های تو در تو می‌توانند پیچیده باشند و خوانش دشواری پیدا کنند که به نام جهنم callback مشهور است.
  • Callback-های ناموفق باید به ازای هر سطح از تودرتو سازی یک بار فراخوانی شوند، در حالی که با استفاده از promise-ها می‌توان از یک بلوک ()catch. منفرد برای مدیریت خطاها در کل زنجیره استفاده کرد.
  • Callback-های ناهمگام چندان مناسب نیستند.
  • Callback-های promise همواره در ترتیب صحیحی که در صف رویداد قرار گرفته‌اند فراخوانی می‌شوند، در حالی که Callback-های ناهمگام چنین نیستند.

سازگاری مرورگر

مرورگرها پشتیبانی نسبتاً خوبی از Callback دارند، گرچه پشتیبانی دقیق از Callback-ها در API-ها به هر API خاص بستگی دارد. برای اطلاع از پشتیبانی هر API باید به مستندات آن مراجعه کنید.

()setTimeout

()setTimeout متدی است که امکان اجرای یک تابع پس از مقدار زمان دلخواه را فراهم می‌سازد.

()setTimeout برای موارد زیر مناسب است/نیست:

عملیات با تأخیر منفرد عملیات مکرر عملیات ترتیبی چندگانه عملیات همزمان چندگانه
بله بله (timeout-های بازگشتی) بله (timeout-های تو در تو) خیر

نمونه کد

در کد زیر مرورگر به مدت دو ثانیه منتظر خواهد ماند تا تابع ناهمگام اجرا شود و سپس پیام هشدار را نمایش می‌دهد:

let myGreeting = setTimeout(function() {
  alert('Hello, Mr. Universe!');
}, 2000)

تله‌ها

با کدی مانند زیر می‌توان از فراخوانی‌های ()setTimeout بازگشتی برای اجرای مکرر یک تابع به روشی مشابه ()setInterval استفاده کرد:

let i = 1;
setTimeout(function run() {
  console.log(i);
  i++;

  setTimeout(run, 100);
}, 100);

البته تفاوتی بین ()setTimeout و ()setInterval بازگشتی وجود دارد:

  • ()setTimeout بازگشتی تضمین می‌کند که دست‌کم مقدار زمان تعیین‌شده (در این مثال 100 میلی‌ثانیه) بین دو اجرای تابع زمان وجود خواهد داشت، یعنی کد اجرا خواهد شد و سپس تا قبل از اجرای مجدد، 100 میلی‌ثانیه صبر خواهد کرد. بازه زمانی مورد نظر صرف نظر از مدت زمانی که کد برای اجرا صبر می‌کند همان خواهد بود.
  • در زمان استفاده از ()setInterval، بازه مورد نظر که انتخاب می‌کنیم شامل زمانی خواهد بود که طول می‌کشد تا کد منتظر اجرا بماند. فرض کنید اجرای کد 40 میلی‌ثانیه طول بکشد، در این صورت بازه انتظار مورد نظر در نهایت 60 میلی‌ثانیه خواهد بود.

زمانی که انتظار می‌رود کد، زمان اجرایی طولانی‌تر از بازه‌ی تعیین شده داشته باشد، بهتر است از ()setTimeout بازگشتی استفاده کنیم. بدین ترتیب بازه زمانی ثابتی بین اجراها لحاظ می‌شود و مهم نیست که اجرای کد جه قدر طول بکشد. بدین ترتیب از بروز خطا اجتناب می‌شود.

سازگاری مرورگر

برنامه نویسی ناهمگام جاوا اسکریپت
جهت نمایش در اندازه بزرگتر روی تصویر کلیک کنید.

()setInterval

()setInterval متدی است که امکان اجرای مکرر تابع را با بازه انتظار تنظیم شده بین هر اجرا فراهم می‌سازد. ()setInterval به اندازه ()requestAnimationFrame کارآمد نیست، اما امکان انتخاب نرخ فریم. نرخ اجرا را می‌دهد.

برای موارد زیر مناسب است/نیست:

عملیات با تأخیر منفرد عملیات مکرر عملیات ترتیبی چندگانه عملیات همزمان چندگانه
خیر بله نه (مگر این که یکسان باشد) خیر

نمونه کد

تابع زیر یک شیء ()Date ایجاد می‌کند، رشته زمانی را با استفاده از ()toLocaleTimeString از آن استخراج می‌کند و سپس آن را در رابط کاربری نمایش می‌دهد. سپس آن را هر ثانیه یک بار با استفاده از ()setInterval اجرا می‌کنیم و جلوه‌ای شبیه به یک ساعت دیجیتالی ایجاد می‌کنیم که هر ثانیه یک بار به‌روزرسانی می‌شود:

function displayTime() {
   let date = new Date();
   let time = date.toLocaleTimeString();
   document.getElementById('demo').textContent = time;
}

const createClock = setInterval(displayTime, 1000);

تله‌ها

نرخ فریم برای سیستمی که انیمیشن روی آن اجرا می‌شود، بهینه‌سازی نشده و ممکن است ناکارآمد باشد. به جز در مواردی که نیاز به نرخ فریم پایین‌تر (آهسته‌تر) داشته باشیم، عموماً بهتر است از ()requestAnimationFrame استفاده کنیم.

سازگاری مرورگر

برنامه نویسی ناهمگام جاوا اسکریپت
جهت نمایش در اندازه بزرگتر روی تصویر کلیک کنید.

()requestAnimationFrame

()requestAnimationFrame متدی است که امکان اجرای مکرر تابع را به روشی کارآمد فراهم می‌سازد. بهترین نکته در مورد این متد آن است که بهترین نرخ فریم ممکن را برای مرورگر/سیستم جاری به دست می‌دهد. شما باید در صورت امکان از این متد به جای ()setInterval() / setTimeout بازگشتی استفاده کنید، مگر این که به نرخ فریم خاصی نیاز داشته باشید.

برای موارد زیر مناسب است/ نیست:

عملیات با تأخیر منفرد عملیات مکرر عملیات ترتیبی چندگانه عملیات همزمان چندگانه
خیر بله خیر (مگر این که یکسان باشد) خیر

نمونه کد

در مثال زیر یک اسپینر ساده انیمیت شده را می‌بینید:

const spinner = document.querySelector('div');
let rotateCount = 0;
let startTime = null;
let rAF;

function draw(timestamp) {
  if(!startTime) {
    startTime = timestamp;
  }

  let rotateCount = (timestamp - startTime) / 3;

  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';

  if(rotateCount > 359) {
    rotateCount = 0;
  }
 
  rAF = requestAnimationFrame(draw);
}

draw();

تله‌ها

هنگام استفاده از متد ()requestAnimationFrame امکان انتخاب یک نرخ فریم خاص وجود ندارد. اگر نیاز داشته باشید که انیمیشن با نرخ فریم کُندتری کار کند، باید از ()setInterval یا ()setTimeout بازگشتی استفاده کند.

سازگاری مرورگر

برنامه نویسی ناهمگام جاوا اسکریپت
جهت نمایش در اندازه بزرگتر روی تصویر کلیک کنید.

Promise-ها

Promise-ها قابلیتی از جاوا اسکریپت هستند که امکان اجرای عملیات ناهمگام را می‌دهند و تا زمانی که تابع به طور کامل اجرا نشده است منتظر می‌مانند تا بر اساس نتیجه آن عملیات دیگر را اجرا کنند. Promise-ها ستون فقرات جاوا اسکریپت مدرن ناهمگام محسوب می‌شوند.

برای موارد زیر مناسب است / نیست:

عملیات با تأخیر منفرد عملیات مکرر عملیات ترتیبی چندگانه عملیات همزمان چندگانه
خیر خیر بله به بخش ()Promise.all در ادامه مراجعه کنید.

نمونه کد

کد زیر یک تصویر را از سرور واکشی کرده و آن را درون یک عنصر <img> نمایش می‌دهد:

fetch('coffee.jpg')
.then(response => response.blob())
.then(myBlob => {
  let objectURL = URL.createObjectURL(myBlob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
})
.catch(e => {
  console.log('There has been a problem with your fetch operation: ' + e.message);
});

تله‌ها

زنجیره‌های Promise می‌توانند پیچیده باشند و تجزیه آن‌ها دشوار باشد. اگر چند Promise را به صورت تو در تو تعریف کنید، ممکن است در نهایت با همان مشکل جهنم callback مواجه شوید. برای مثال به کد زیر توجه کنید:

remotedb.allDocs({
  include_docs: true,
  attachments: true
}).then(function (result) {
  var docs = result.rows;
  docs.forEach(function(element) {
    localdb.put(element.doc).then(function(response) {
      alert("Pulled doc with id " + element.doc._id + " and added to local db.");
    }).catch(function (err) {
      if (err.name == 'conflict') {
        localdb.get(element.doc._id).then(function (resp) {
          localdb.remove(resp._id, resp._rev).then(function (resp) {
// et cetera...

بهتر است از قدرت زنجیره‌سازی Promise-ها برای ایجاد ساختار مسطح‌تر و با تجزیه آسان‌تر استفاده کنید:

remotedb.allDocs(...).then(function (resultOfAllDocs) {
  return localdb.put(...);
}).then(function (resultOfPut) {
  return localdb.get(...);
}).then(function (resultOfGet) {
  return localdb.put(...);
}).catch(function (err) {
  console.log(err);
});

یا حتی:

remotedb.allDocs(...)
.then(resultOfAllDocs => {
  return localdb.put(...);
})
.then(resultOfPut => {
  return localdb.get(...);
})
.then(resultOfGet => {
  return localdb.put(...);
})
.catch(err => console.log(err));

سازگاری مرورگر

برنامه نویسی ناهمگام جاوا اسکریپت
جهت نمایش در اندازه بزرگتر روی تصویر کلیک کنید.

()Promise.all

یکی از قابلیت‌های جاوا اسکریپت این است که می‌توان منتظر چند Promise ماند تا این Promise-ها به پایان برسند. و یک عملیات دیگر بر مبنای نتایج این Promise-ها اجرا کرد.

برای موارد زیر مناسب است/نیست:

عملیات با تأخیر منفرد عملیات مکرر عملیات ترتیبی چندگانه عملیات همزمان چندگانه
خیر خیر خیر بله

نمونه کد

در مثال زیر چند منبع از سرور واکشی می‌شوند و از ()Promise.all استفاده می‌شود تا زمانی که همه منابع آماده شدند منتظر بماند و سپس همه آن‌ها را نمایش می‌دهد:

function fetchAndDecode(url, type) {
  // Returning the top level promise, so the result of the entire chain is returned out of the function
  return fetch(url).then(response => {
    // Depending on what type of file is being fetched, use the relevant function to decode its contents
    if(type === 'blob') {
      return response.blob();
    } else if(type === 'text') {
      return response.text();
    }
  })
  .catch(e => {
    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
  });
}

// Call the fetchAndDecode() method to fetch the images and the text, and store their promises in variables
let coffee = fetchAndDecode('coffee.jpg', 'blob');
let tea = fetchAndDecode('tea.jpg', 'blob');
let description = fetchAndDecode('description.txt', 'text');

// Use Promise.all() to run code only when all three function calls have resolved
Promise.all([coffee, tea, description]).then(values => {
  console.log(values);
  // Store each value returned from the promises in separate variables; create object URLs from the blobs
  let objectURL1 = URL.createObjectURL(values[0]);
  let objectURL2 = URL.createObjectURL(values[1]);
  let descText = values[2];

  // Display the images in <img> elements
  let image1 = document.createElement('img');
  let image2 = document.createElement('img');
  image1.src = objectURL1;
  image2.src = objectURL2;
  document.body.appendChild(image1);
  document.body.appendChild(image2);

  // Display the text in a paragraph
  let para = document.createElement('p');
  para.textContent = descText;
  document.body.appendChild(para);
});

تله‌ها

اگر یک ()Promise.all رد شود، در این صورت یک یا چند مورد از Promise-هایی که درون پارامترهای آرایه آن وارد شده باید رد شوند، در غیر این صورت Promise-ها کلاً بازگشت نمی‌یابند. بدین ترتیب باید آن‌ها را یک به یک بررسی کنید تا ببینید کدام یک بازگشت یافته‌اند.

سازگاری مرورگر

برنامه نویسی ناهمگام جاوا اسکریپت
جهت نمایش در اندازه بزرگتر روی تصویر کلیک کنید.

Async/await

Async/await یک ساختار نمادین (Syntactic sugar) است که بر مبنای promise-ها ساخته شده و امکان اجرای عملیات ناهمگام را با استفاده از ساختاری فراهم می‌کند که بیشتر شبیه نوشتن کد callback همگام است.

برای موارد زیر مناسب است/ نیست:

عملیات با تأخیر منفرد عملیات مکرر عملیات ترتیبی چندگانه عملیات همزمان چندگانه
خیر خیر بله بله (در ترکیب با ()Promise.all)

نمونه کد

مثال زیر یک بازنویسی از مثال Promise ساده‌ای است که قبلاً دیدیم و تصاویر را واکشی کرده و نمایش می‌داد و این بار با استفاده Async/await نوشته شده است:

async function myFetch() {
  let response = await fetch('coffee.jpg');
  let myBlob = await response.blob();

  let objectURL = URL.createObjectURL(myBlob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
}

myFetch();

تله‌ها

  • از عملگر await نمی‌توان درون یک تابع غیر ناهمگام یا در سطح بالای ساختار کد استفاده کرد. این موضوع در برخی موارد موجب نیاز به ایجاد پوشش تابعی اضافی می‌شود که در برخی شرایط ممکن است دشوار باشد، اما در اغلب موارد ارزشش را دارد.
  • پشتیبانی مرورگر برای async/await به اندازه Promise-ها مناسب است. اگر می‌خواهید از async/await استفاده کنید، اما در مورد پشتیبانی مرورگرهای قدیمی دغدغه دارید، می‌توانید از کتابخانه BabelJS استفاده کنید. این کتابخانه امکان نوشتن اپلیکیشن‌ها را با استفاده از جدیدترین کدهای جاوا اسکریپت می‌دهد و سپس تغییرات مورد نظر را بسته به نیاز در مورد مرورگرهای کاربر اعمال می‌کند.

سازگاری مرورگر

برنامه نویسی ناهمگام جاوا اسکریپت
جهت نمایش در اندازه بزرگتر روی تصویر کلیک کنید.

بدین ترتیب به پایان این مقاله می‌رسیم.

برای مطالعه بخش بعدی به این لینک بروید:

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۰ نفر
آیا این مطلب برای شما مفید بود؟
شما قبلا رای داده‌اید!
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
developer.mozilla

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *