جاوا اسکریپت ناهمزمان: همه چیزهایی که باید بدانید

APIهای مرورگر، همچنین به عنوان وب API شناخته می شوند، رابط های از قبل موجود در مرورگرهای وب جاسازی شده اند. این APIها عملکردهای داخلی را ارائه می دهند که می توانند در برنامه های وب مورد استفاده قرار گیرند.

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

برخی از ویژگی های مرورگر وب عبارتند از:

این setTimeout() متد به شما اجازه می دهد تا یک بلوک کد را پس از یک تاخیر زمانی مشخص اجرا کنید. برای اجرای کد یک بار طراحی شده است.

نحو از setTimeout() است:

setTimeout(function, milliseconds);

مثال:

function username() {
  console.log("John")
}

setTimeout(username, 5000)
console.log("Doe")

خروجی:

Doe
John

این setInterval() متد یک بلوک کد را در هر رویداد زمان بندی مشخص تکرار می کند.

نحو از setInterval() است :

setInterval(function, milliseconds);

مثال:

// program to display a text using setInterval method
function orderItem() {
    console.log('I want a bag');
}

setInterval(orderItem, 1000);

خروجی:

I want a bag
I want a bag
I want a bag
I want a bag
...

در برنامه فوق، orderItem() تابع توسط setInterval() روش در فاصله 1000 میلی ثانیه. در نتیجه، برنامه هر 1 ثانیه پیام “I want a bag” را خروجی می دهد.

clearTimeout() متد یک مهلت زمانی را که قبلاً با تماس برقرار شده بود لغو می کند setTimeout().

نحو از clearTimeout() است:

clearTimeout(timeoutId)

مثال:

// Set a timeout that logs a message after 3 seconds
const timeoutId = setTimeout(() => {
  console.log("Timeout executed!");
}, 3000);

// Clear the timeout before it executes
clearTimeout(timeoutId);

خروجی:
اگر قطعه کد ارائه شده را اجرا کنید، خروجی وجود نخواهد داشت. این clearTimeout() تابع اجرای مهلت تعیین شده توسط را لغو می کند setTimeout() جلوگیری از فراخوانی تابع تماس در نتیجه، پیام “Timeout executed!” در کنسول ثبت نخواهد شد.

clearInterval() اگر می خواهید فراخوانی تابع را متوقف کنید استفاده می شود.

نحو از clearInterval() است:

clearInterval(intervalId);

مثال:

// Define a variable to store the interval ID
let intervalId;

// Function to be executed repeatedly
function showMessage() {
  console.log("Hello!");
}

// Start the interval
intervalId = setInterval(showMessage, 1000);

// After 5 seconds, stop the interval
setTimeout(() => {
  clearInterval(intervalId);
  console.log("Interval stopped");
}, 5000);

خروجی:

Hello!
Hello!
Hello!
Hello!
Interval stopped

در برنامه فوق ابتدا یک متغیر را اعلام می کنید intervalId برای ذخیره شناسه بازگردانده شده توسط setInterval تابع. این showMessage تابعی تعریف شده است که هر 1000 میلی ثانیه (1 ثانیه) بارها و بارها با استفاده از setInterval.
بعد از 5 ثانیه (5000 میلی ثانیه)، clearInterval با نامیده می شود intervalId به عنوان استدلال برای توقف فاصله. این باعث توقف اجرای showMessage تابع. در نهایت، پیامی به کنسول وارد می‌شود که نشان می‌دهد این فاصله متوقف شده است.

متد fetch() در جاوا اسکریپت برای درخواست داده از سرور استفاده می شود.

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

صف برگشت به تماس

صف برگشت تماس جایی است که تابع برگشت به تماس فشار داده می شود و در انتظار اجراست. صف برگشت از اصل First-In-First-Out (FIFO) پیروی می کند.

حالا بیایید این مثال را مرور کنیم:

function username() {
  console.log("John")
}

setTimeout(username, 5000)
console.log("Doe")

//output
Doe
John

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

در اینجا نحوه کار آن آمده است:

• این username تابع تعریف شده و در حافظه جهانی ذخیره می شود که رشته “جان” را در کنسول ثبت می کند.
• این setTimeout() تابع با دو آرگومان فراخوانی می شود. اولین استدلال این است username تابع که تابع callback را مشخص می کند که باید اجرا شود و آرگومان دوم تاخیر بر حسب میلی ثانیه است که در این حالت 5000 میلی ثانیه (یا 5 ثانیه) است.
• بعد از تماس setTimeout()، کد به خط بعدی ادامه می یابد و رشته “Doe” را در کنسول ثبت می کند.
• رشته “Doe” ابتدا به کنسول وارد می شود.
• پس از تأخیر 5000 میلی ثانیه ای، username تابع اجرا می شود و رشته “جان” را در کنسول ثبت می کند.

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

حلقه رویداد اجرای کد را برای جلوگیری از مسدود شدن مدیریت می‌کند و برنامه را قادر می‌سازد تا عملکرد خود را حتی در طول انجام کارهای ناهمزمان ادامه دهد.

وقتی تابعی را به عنوان آرگومان به تابع دیگری ارسال می‌کنید و آن تابع در تابع خارجی فراخوانی یا اجرا می‌شود، معمولاً به آن تابع فراخوانی می‌گویند.

حالا بیایید این مثال را مرور کنیم:

function placeOrder() {
    setTimeout(() => {
       return (Math.random() * 10) <= 5 ? 'Bag' : 'Shoe';
    }, 2000);
}

let order = placeOrder();
console.log('Order is for: ' + order);

//Output
// Order is for: undefined

اینجا در placeOrder تابع، setTimeout() بعد از 2 ثانیه اجرا می شود و در آن زمان console.log عبارت قبلاً اجرا شده است، مقدار چاپ شده از order تعریف نشده است

اکنون، تنها پس از بازگشت داده ها، می توانید با وارد کردن پیام خود به کنسول، این مشکل را حل کنید placeOrder. این را می توان با ارسال یک تابع callback به انجام داد placeOrder، که در داخل فراخوانی خواهد شد placeOrder تابع.

function placeOrder(callback) {
    setTimeout(() => {
        const order = (Math.random() * 10) <= 5 ? 'Bag' : 'Shoe';
        callback(order);
    }, 2000);
}

placeOrder((order) => {
    console.log('Order is for: ' + order);
});

//Output
// Order is for: Bag

پس از دو ثانیه، تابع callback فراخوانی می شود و دستور کنسول با مقدار سفارش صحیح اجرا می شود.

خروجی تابع placeOrder ممکن است در مورد شما با استفاده از آن متفاوت باشد Math.random() برای تعیین ارزش سفارش

وعده

وعده‌ها مدیریت کدهای ناهمزمان را ساده می‌کنند و نوشتن و حفظ عملیات ناهمزمان را بدون توسل به توابع پاسخ به تماس یا تماس‌های تو در تو (معروف به جهنم برگشت تماس) آسان‌تر می‌کنند.

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

یک قول می تواند در یکی از سه حالت باشد:

• در انتظار: حالت اولیه زمانی که یک وعده ایجاد می شود و عملیات ناهمزمان هنوز ادامه دارد.
• Fulfilled: حالتی که عملیات ناهمزمان با موفقیت انجام می شود و وعده دارای مقدار حل شده است.
• Rejected: حالتی که عملیات ناهمزمان با خطا مواجه می شود یا با شکست مواجه می شود و قول دلیلی برای رد دارد.

سه جنبه اصلی از قول وجود دارد.

• ایجاد یک وعده
• رسیدگی به یک قول
• زنجیر زدن وعده

ایجاد وعده ها

برای ایجاد یک وعده، از سازنده Promise استفاده می کنید که یک تابع (که معمولاً به عنوان اجرا کننده نامیده می شود) را به عنوان آرگومان می پذیرد. تابع executor با دو پارامتر ارائه می شود: Resol و Reject. در تابع executor، وظیفه ناهمزمان خود را اجرا می کنید و بر اساس نتیجه حل یا رد می کنید.

در اینجا نمونه ای از ایجاد یک وعده آورده شده است:

const fetchData = new Promise((resolve, reject) => {
  // Simulating asynchronous task (e.g., making an API call)
  setTimeout(() => {
    const data = { id: 1, name: "John Doe" };
   // Fulfilled the promise with the fetched data
    resolve(data); 
    reject(new Error("Failed to fetch data")); 
    // Alternatively, reject the promise with an error
  }, 2000);
});

پس از ایجاد یک وعده، می‌توانید تماس‌های برگشتی را برای کنترل نتیجه با استفاده از آن اختصاص دهید then() و catch() مواد و روش ها.

این then() متد یک تابع callback را به عنوان آرگومان می گیرد و وعده محقق شده را مدیریت می کند. ارزش حل شده یا نتیجه قول را به عنوان استدلال دریافت می کند.

این catch() این روش برای رسیدگی به رد یک قول استفاده می شود و زمانی که قول رد می شود فراخوانی می شود و به شما امکان می دهد خطاهایی را که در حین عملیات ناهمزمان رخ داده است مدیریت کنید.

حالا بیایید این مثال را مرور کنیم:

fetchData
  .then((data) => {
    // Handle the fulfilled promise (access the resolved value)
    console.log("Fetched data:", data);
  })
  .catch((error) => {
    // Handle the rejected promise (access the error)
    console.log("Error:", error);
  });

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

fetchData
  .then((data) => {
    // Handle the first fulfilled promise
    console.log("Fetched data:", data);
    return someOtherAsyncTask(); 
 // Return a new promise
  })
  .then((result) => {
    // Handle the result of the second fulfilled promise
    console.log("Second async task result:", result);
  })
  .catch((error) => {
    // Handle any errors in the chain
    console.log("Error:", error);
  });

Async/Await یک افزودنی نسبتاً جدید به جاوا اسکریپت است که در ES8 معرفی شده است و ابزاری برای نوشتن کدهای ناهمزمان به صورت همزمان فراهم می کند.

اگر از Async کلمه کلیدی قبل از تعریف تابع، سپس می توانید از انتظار در تابع استفاده کنید. Await به شما این قدرت را می دهد که عملکرد را به روشی غیر مسدود کننده متوقف کنید تا زمانی که وعده حل شود.

حالا بیایید این مثال را مرور کنیم:

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await response.json();
    console.log('Fetched data:', data);
  } catch (error) {
    console.log('Error fetching data:', error);
  }
}
fetchData();

در اینجا توضیح قطعه کد آمده است:

• یک تابع همگام نامیده می شود fetchUserData() اعلام شده است. در داخل این تابع، یک درخواست HTTP ناهمزمان به نقطه پایانی API با استفاده از fetch() تابع. این fetch() تابع وعده ای را برمی گرداند که به یک شی پاسخ حل می شود.
• اجرا با استفاده از await کلمه کلیدی، به کد اجازه می دهد تا برای وعده بازگشتی منتظر بماند fetch() برای حل و فصل. شی پاسخ حل شده در ذخیره می شود response متغیر.
• یکی دیگر await کلمه کلیدی برای توقف اجرا و منتظر ماندن برای وعده ای که توسط آن بازگردانده می شود استفاده می شود response.json() روش. این روش بدنه پاسخ را به صورت JSON تجزیه می کند. سپس داده های JSON تجزیه شده در ذخیره می شود data متغیر.
• در نهایت، داده های کاربر واکشی شده در کنسول ثبت می شود. اگر در حین اجرای تابع async خطایی رخ دهد، در آن گیر می کند catch مسدود کردن، امکان مدیریت و ثبت خطاها را فراهم می کند.

در این مقاله، یاد گرفتید که جاوا اسکریپت ناهمزمان چیست و چگونه جاوا اسکریپت ناهمزمان را با استفاده از premts و async/await بنویسید. همچنین نحوه ارسال درخواست‌ها را با استفاده از fetch API و async/await و نحوه بازگرداندن پاسخ به تماس‌های ناهمزمان مشاهده کرده‌اید.

در جاوا اسکریپت، دستورالعمل های همزمان همیشه بر دستورالعمل های ناهمزمان اولویت دارند. به عنوان مثال، اگر سناریویی با عبارات console.log متعدد به دنبال تابع setTimeout() با مدت زمان 0 میلی ثانیه داشته باشید، تمام دستورات console.log ابتدا قبل از setTimeout() اجرا می شوند.

امیدوارم این مقاله آموزنده بوده باشد؟ می توانید آن را لایک کنید یا نظر خود را در مورد آن کامنت کنید.