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

في هذه المقالة، سنقوم بتحليل الرفض والاختناق، ونوضح لك متى تستخدمهما، ونقدم أمثلة واقعية لرؤيتها أثناء العمل. دعونا نتعمق في هذه التقنيات الأساسية لتحسين أداء جافا سكريبت!

ما هو الرفض؟

كيف يعمل

فكر في الرد مثل انتظار شخص ما حتى ينتهي من الحديث قبل أن تتدخل بردك. إذا سبق لك أن شاركت في محادثة حيث يستمر شخص ما في مقاطعتك، فسوف تفهم هذه الفكرة! المفهوم الأساسي لـ debouncing هو أنه يؤخر تنفيذ دالة حتى مرور وقت محدد منذ آخر مرة تم فيها تشغيل الحدث.

بعبارات بسيطة، إذا استمر حدوث حدث (مثل كتابة المستخدم) بسرعة، فإن الارتداد يضمن أن الوظيفة المرتبطة (مثل استعلام البحث) يتم تنفيذها فقط بعد توقف المستخدم لفترة معينة.

متى تستخدم الارتداد

يجب عليك استخدام الارتداد عندما تريد الحد من استدعاءات الوظائف المفرطة الناتجة عن إدخال المستخدم المتكرر. المثال الكلاسيكي هو عندما يكون لديك مربع بحث وتريد إجراء اتصال بواجهة برمجة التطبيقات (API) في كل مرة يكتب فيها المستخدم. بدون الارتداد، يمكن استدعاء واجهة برمجة التطبيقات (API) لكل ضغطة مفتاح، مما يؤدي إلى تحميل غير ضروري على الخادم الخاص بك. مع الارتداد، يتم استدعاء واجهة برمجة التطبيقات (API) فقط عندما يتوقف المستخدم عن الكتابة.

الرفض في الكود

function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
}

// Usage
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(() => {
    console.log('API call made!');
}, 300)); // Only executes 300ms after the last keystroke

في هذا المثال، تضمن وظيفة الارتداد أن استدعاء واجهة برمجة التطبيقات (API) يحدث فقط بعد 300 مللي ثانية من توقف المستخدم عن الكتابة.

ما هو الاختناق؟

كيف يختلف عن الارتداد

الآن، دعونا نتحدث عن الاختناق. إذا كان debounce ينتظر الرد حتى تهدأ الثرثرة، فإن الاختناق يشبه شرطي المرور الذي يسمح لسيارة واحدة فقط بالمرور كل بضع ثوانٍ، بغض النظر عن عدد السيارات المنتظرة. فهو يضمن استدعاء الوظيفة مرة واحدة على الأكثر كل فترة محددة، حتى لو تم تشغيل الحدث بشكل متكرر.

متى يتم استخدام الاختناق

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

الاختناق في الكود

function throttle(func, limit) {
    let lastCall = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastCall >= limit) {
            lastCall = now;
            func.apply(this, args);
        }
    };
}

// Usage
window.addEventListener('scroll', throttle(() => {
    console.log('Scroll event!');
}, 1000)); // Executes at most once every 1000ms

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

أمثلة من العالم الحقيقي

دعونا نضع هذه التقنيات في سياق أكثر عملية. لنفترض أنك تقوم بإنشاء تطبيق React حيث يكتب المستخدمون في مربع البحث. يمكنك رفض أحداث الإدخال لمنع إغراق الخادم الخاص بك باستدعاءات واجهة برمجة التطبيقات (API). وبدلاً من ذلك، إذا كنت تتتبع مدى تمرير المستخدم على الصفحة، فيمكنك استخدام التقييد لتحسين أدائك.

الرفض في رد الفعل

import { useState } from 'react';

function SearchComponent() {
    const [query, setQuery] = useState('');

    const handleSearch = debounce((value) => {
        // API call with the value
        console.log('Searching for:', value);
    }, 300);

    return (
         {
                setQuery(e.target.value);
                handleSearch(e.target.value);
            }}
        />
    );
}

اختناق أحداث التمرير

import { useEffect } from 'react';

function ScrollTracker() {
    useEffect(() => {
        const handleScroll = throttle(() => {
            console.log('Scrolling...');
        }, 1000);

        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    return 
Scroll to see throttling in action!
;
}

أفضل الممارسات لتحسين الأداء

الرفض مقابل الاختناق: متى تختار

إليك قاعدة سريعة:

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

عندما تعرف نوع الحدث الذي تتعامل معه وعدد مرات حدوثه، يمكنك اختيار الأسلوب المناسب لهذه المهمة.

خاتمة

يعد التحكم في الأحداث المتكررة في JavaScript أمرًا ضروريًا لتحسين الأداء، ويقدم كل من الإلغاء والاختناق حلولاً قوية. ومن خلال فهم وقت استخدام كل منها، يمكنك جعل تطبيقات الويب الخاصة بك أكثر سلاسة واستجابة، سواء كان ذلك للتعامل مع مدخلات البحث، أو تغيير حجم النوافذ، أو إدارة أحداث التمرير.

في المرة القادمة عندما تجد تطبيقك يتعطل بسبب الكثير من الأحداث، اسأل نفسك: هل يجب أن أرفض أو أخنق؟ ستكون سعيدًا بذلك!

هل أنت مستعد لتجربتها؟ في المرة القادمة التي تعمل فيها على مشروع، قم بتجربة هذه التقنيات. سوف تتفاجأ بمدى سلاسة كل شيء!