تعامل JQuery مع دوال داخلية

تبدو لديك وظيفة في جيكويري تُدعى is_airport والتي تقوم بفحص ما إذا كانت الموقع هو مطار باستخدام JSON يحتوي على معلومات عن المطارات. وعلى الرغم من أن كل الأمور تبدو تعمل بشكل صحيح، إلا أنك تواجه مشكلة تتمثل في أن الدالة تعيد قيمة false بدلاً من true على الرغم من أنها تقوم بإصدار إنذار “OK” عند العثور على مطار مطابق.

المشكلة هنا تكمن في كيفية تعامل جيكويري مع الدوال التي تستخدم داخل دوال أخرى مثل الدالة each التي تستخدمها في is_airport. عندما تقوم بإرجاع قيمة من داخل دالة تُدعى داخل each، فإن هذه القيمة لا تُرجع بشكل صحيح من الدالة الرئيسية is_airport بسبب طريقة عمل each وطبيعتها الحلقية.

لحل هذه المشكلة، يمكنك استخدام $.each لكن بطريقة مختلفة باستخدام متغير مؤقت لتخزين نتيجة البحث وإعادتها بعد الانتهاء من الحلقة. إليك كيف يمكنك تعديل الكود:

javascriptCopy code
function is_airport(destination_id){
    var json_storage = $("#locations-json");
    var airports = JSON.parse(json_storage.attr("data-airports"));
    var isAirport = false; // متغير لتخزين نتيجة البحث
    $.each(airports, function(id, name) {
        console.log(id, destination_id, name);
        if (id == destination_id) {
            alert('OK');
            isAirport = true; // تغيير قيمة المتغير لتحديد أنه تم العثور على المطار
            return false; // توقف الحلقة بمجرد العثور على المطار
        }
    });
    return isAirport; // إرجاع قيمة المتغير
}

$(document).ready(function() {
    console.log(is_airport(5));
});

بهذه الطريقة، يتم تخزين نتيجة البحث في isAirport وإعادتها في نهاية الدالة بعد اكتمال الحلقة. هذا يسمح بالتحكم بشكل صحيح في القيمة التي تُعيد من الدالة is_airport.

بالطبع، إليك المقال بالكامل:

JQuery يُعيد القيمة “false” بعد العودة بقيمة “true”؟

في عالم تطوير الويب، قد تواجه بعض التحديات الغريبة والصعبة التي تتطلب فهمًا عميقًا للأدوات والتقنيات التي تستخدمها. أحد هذه التحديات قد يكون في استخدام JQuery، خاصةً عندما يتعلق الأمر بالتعامل مع الدوال داخل دوال أخرى. دعونا نلقي نظرة على مشكلة محددة تواجهها بعض المطورين وكيف يمكن حلها.

عندما تقوم بتطوير تطبيق ويب باستخدام JQuery، قد تحتاج في بعض الأحيان إلى تنفيذ وظائف معقدة تشمل الاستعلام عن البيانات ومعالجتها. واحدة من هذه الوظائف الشائعة هي فحص ما إذا كانت قيمة معينة تطابق بيانات معينة مثل تحقق ما إذا كانت القيمة هي مطار من بين قائمة المطارات.

في الكود المقدم، لدينا وظيفة تُدعى is_airport تقوم بالقيام بالفحص المذكور أعلاه. لكن المشكلة هي أنه على الرغم من أن الدالة تبدو تعمل بشكل صحيح، إلا أنها تعيد قيمة “false” بدلاً من “true” حتى بعد عودتها بقيمة “true” من داخل الدالة.

السبب وراء هذه المشكلة يعود إلى طريقة عمل JQuery في التعامل مع الدوال التي تُستدعى داخل دوال أخرى مثل الدالة each. عند استخدام each، فإن JQuery لا يعيد قيمة الدالة الرئيسية بشكل صحيح بسبب طبيعة الحلقة وتنفيذها.

لحل هذه المشكلة، يمكن تعديل الكود لاستخدام متغير مؤقت لتخزين نتيجة البحث وإعادتها بعد اكتمال الحلقة. إليك كيف يمكن تعديل الكود لتحقيق ذلك:

javascriptCopy code
function is_airport(destination_id){
    var json_storage = $("#locations-json");
    var airports = JSON.parse(json_storage.attr("data-airports"));
    var isAirport = false; // متغير لتخزين نتيجة البحث
    $.each(airports, function(id, name) {
        console.log(id, destination_id, name);
        if (id == destination_id) {
            alert('OK');
            isAirport = true; // تغيير قيمة المتغير لتحديد أنه تم العثور على المطار
            return false; // توقف الحلقة بمجرد العثور على المطار
        }
    });
    return isAirport; // إرجاع قيمة المتغير
}

$(document).ready(function() {
    console.log(is_airport(5));
});

من خلال هذا التعديل، يتم تخزين نتيجة البحث في متغير مؤقت isAirport وإعادتها في نهاية الدالة بعد اكتمال الحلقة. بهذه الطريقة، يتم التحكم بشكل صحيح في القيمة التي تُعيد من الدالة is_airport.

في الختام، يُظهر هذا المثال كيف يمكن أن تواجه تحديات في استخدام JQuery حتى في الحالات البسيطة. ومن خلال فهم الأدوات التي تستخدمها بعمق وبتقدير لتفاصيلها، يمكنك تجنب هذه المشاكل وتحقيق الأداء المطلوب في تطوير تطبيقات الويب الخاصة بك.