موضوع

تقدم مكتبة Lodash وظيفتين مساعدتين للتحكم في معدل تنفيذ الدالة: throttle و debounce. فيما يلي أمثلة متقدمة لكل منهما:

التثبيط (Throttle)

تضمن الدالة throttle استدعاء دالة ما مرة واحدة على الأكثر خلال فترة زمنية محددة. وهي مفيدة لتحديد معدل أحداث مثل التمرير أو تغيير حجم النافذة.

مثال

import _ from 'lodash';

const logResize = () => {
    console.log('Window resized');
};

// Create a throttled version of the logResize function
const throttledResize = _.throttle(logResize, 2000); // 2000ms throttle

window.addEventListener('resize', throttledResize);

الخيارات المتقدمة

يمكنك تخصيص سلوك throttle باستخدام خيارات إضافية:

const throttledResize = _.throttle(logResize, 2000, {
    leading: true, // Run on the leading edge
    trailing: false // Don't run on the trailing edge
});

التراجع (Debounce)

تقوم الدالة debounce بإنشاء نسخة مؤجلة من الدالة تؤخر تنفيذها حتى انقضاء فترة زمنية محددة منذ آخر مرة تم استدعاؤها فيها. هذا مفيد في سيناريوهات مثل التحقق من صحة إدخال النموذج أو الحفظ التلقائي.

مثال

import _ from 'lodash';

const saveInput = (value) => {
    console.log('Input saved:', value);
};

// Create a debounced version of the saveInput function
const debouncedInputSave = _.debounce(saveInput, 1000); // 1000ms debounce

const inputField = document.getElementById('input');
inputField.addEventListener('input', (event) => {
    debouncedInputSave(event.target.value);
});

الخيارات المتقدمة

يمكنك أيضًا تخصيص debounce باستخدام معلمات إضافية:

const debouncedInputSave = _.debounce(saveInput, 1000, {
    leading: false, // Do not run on the leading edge
    trailing: true // Run on the trailing edge
});

الملخص

• التثبيط (Throttle): يحد من التنفيذ لمرّة واحدة على الأكثر خلال الفترة الزمنية المحددة.
• التأجيل المزمن (Debounce): يؤخر التنفيذ حتى بعد أن يتم إجراء آخر استدعاء لفترة زمنية محددة.

تتيح هذه الخيارات المتقدمة ضبط سلوك وظائفك بشكل دقيق لتناسب حالات الاستخدام المحددة.