JavaScript-logo-700x388

فراخوانی توابع به صورت ناهمزمان در JavaScript

ارسال شده در: جاوا اسکریپت . کدنویسی

برای شروع از یک موضوع ساده استفاده می‌کنم تا دوباره به روزهای خوب نوشتن برگردم. فراخوانی توابع به صورت ناهمزمان در JavaScript به روش های مختلف انجام میشه.

برای کاربران حرفه‌ای تر استفاده از تکنولوژی‌ها و Frameworkهای زیر رو پیشنهاد می‌کنم: + Backbone + TypeScript + AngularJS البته الزاما در این libraryها از روش‌های مشابه استفاده نشده. مثلا در backbone از event استفاده میشه.

اما در اینجا می‌خوام از یک راه خیلی ساده و بدون هیچ Libraryای استفاده کنم. این روش برای پروژه‌های کوچک و یا پروژه‌هایی که وقت سازمان دادن پروژه رو ندارین و میخواین خیلی زود و با اضافه کردن یک فایل JS به پروژه کار رو تمام کنین به درد می‌خوره.

Callback

احتمالا در jQuery از Eventهای Click و یا Change استفاده کردین. مثلا:

$(".a-link").click(callback);

در واقع ما در اینجا برای پارامتر callback یک تابع ارسال می‌کنیم که زمانی که Event کلیک لینک (a-link.) اتفاق افتاد function ما فراخونده میشه. این Pureترین و ساده‌ترین راه برای به تأخیر انداختن اجرای یک function هست.

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

-- Index.html
-- js
-- -- jquery.js
-- -- scripts.js

در فایل scripts.js یک function می‌سازیم:

var changeColor = function() {
    // Body background will be `pink` hear
    $("body").css({ "background-color": "pink" });
};

حالا محتوای فایل index.html به شکل زیر خواهد بود.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Blogwave: Color Changer;</title>
</head>
<body>
    <button id="color-changer"></button>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/scripts.js"></script>
</body>
</html>

حالا به scripts.js کد زیر رو اضافه می‌کنیم:

$(document).ready(function() {
    $("#color-changer").click(changeColor);
});

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

var getFavoriteColor = function() {
    $.ajax({
        type: "POST",
        url: "/api/GetFavoriteColor",
        contentType: "application/json"
    }).done(function (color) {
        return color;
    })
};

می‌دونیم که کد بالا هیچ وقت هیچ رنگی رو بر نمی‌گردونه. چون زمانی تابع done اجرا میشه که فراخوانی تابع getFavoriteColor به پایان رسیده. پس ما اینجا یک پارامتر ورودی به نام callback خواهیم گرفت:

var getFavoriteColor = function(callback) {
    $.ajax({
        type: "POST",
        url: "/api/GetFavoriteColor",
        contentType: "application/json"
    }).done(function (color) {
        if (callback) {
            callback(color);
        }
    })
};

در اینجا ما چک کردیم که اگه callback تعریف شده باشه ما پارامتر color رو واسش ارسال می‌کنیم و اون رو فراخوانی می‌کنیم. حالا کد قبل رو اینطور ویرایش می‌کنیم:

var changeColor = function() {
    // Body background will be `pink` hear
    $("body").css({ "background-color": "pink" });

    // ‌Body background will be user defined color hear
    getFavoriteColor(function(color) {
        $("body").css({ "background-color": color });
    });
};

ما یک تابع به عنوان پارامتر به تابع getFavoriteColor ارسال کردیم که خودش یک پارامتر به نام color میگیره. حالا هر چقدر هم که ajax کارش طول بکشه برای ما مهم نیست، بلافاصله بعد از دریافت رنگ جدید getFavoriteColor رنگ رو پاس میده به تابعی که ما ساختیم و اون هم رنگ پس‌زمینه رو تغییر میده.

:)

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