Underscore.js এবং ফাংশনাল প্রোগ্রামিং
Underscore.js হল একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা ফাংশনাল প্রোগ্রামিং ধারণা ব্যবহার করে কোড লেখার প্রক্রিয়াকে আরও সহজ, দ্রুত এবং কার্যকর করে তোলে। Function functions হল Underscore.js-এ এমন ফাংশন যা অন্যান্য ফাংশনের সাথে কাজ করে, যেমন একটি ফাংশনকে আর্গুমেন্ট হিসেবে গ্রহণ করা, রিটার্ন করা বা একটি নির্দিষ্ট কাজের জন্য প্রক্রিয়া তৈরি করা।
Underscore.js-এ ফাংশনগুলো ফাংশনাল প্রোগ্রামিং কৌশলগুলোকে শক্তিশালী করে, যেমন হায়ার অর্ডার ফাংশন, ডিবাউন্সিং, থ্রোটলিং, এবং ফাংশন বাউন্ডিং। এসব ফাংশন অ্যাসিঙ্ক্রোনাস কাজ সহজ করে এবং কোডের কার্যকারিতা বাড়ায়।
Underscore.js-এ Function Functions
Underscore.js-এ বেশ কয়েকটি ফাংশন রয়েছে যেগুলি ফাংশনাল প্রোগ্রামিংয়ের কিছু গুরুত্বপূর্ণ ধারণা বাস্তবায়িত করে। এই ফাংশনগুলি ডেভেলপারদের তাদের কোডকে আরও সংক্ষিপ্ত, পুনরাবৃত্তিমূলক এবং পুনঃব্যবহারযোগ্য করতে সাহায্য করে।
১. _.bind() - ফাংশন বাউন্ডিং
_.bind() ফাংশনটি একটি নির্দিষ্ট কনটেক্সট (যেমন, this) এবং আর্গুমেন্টের সাথে একটি ফাংশন বাউন্ড (bind) করে। এটি ফাংশনকে এমনভাবে রিটার্ন করে, যাতে এটি নির্দিষ্ট কনটেক্সটের মধ্যে কাজ করে।
উদাহরণ:
var person = {
name: "Alice",
greet: function() {
console.log("Hello, " + this.name);
}
};
var greetAlice = _.bind(person.greet, person);
greetAlice(); // "Hello, Alice"
এখানে, _.bind() মেথড greet ফাংশনটি person অবজেক্টের সাথে বাউন্ড করে, যাতে এটি যখন কল করা হয়, তখন this.name হবে "Alice"।
২. _.debounce() - ডিবাউন্সিং
_.debounce() একটি ফাংশনকে নির্দিষ্ট সময়ের জন্য বিলম্বিত করে, অর্থাৎ, একাধিক বার কল করার পর কেবল একটি সময়সীমার পর সেটি রান করবে। এটি সাধারণত ইউজার ইন্টারঅ্যাকশন বা ইভেন্টগুলির জন্য ব্যবহৃত হয়, যেমন স্ক্রলিং বা টাইপিং, যাতে অপ্রয়োজনীয় কল কমিয়ে আনা যায়।
উদাহরণ:
var handleResize = _.debounce(function() {
console.log("Window resized!");
}, 300);
window.addEventListener("resize", handleResize);
এখানে, _.debounce() ফাংশনটি স্ক্রিন রিজাইজ করার সময় প্রতি 300 মিলিসেকেন্ড পর পর কেবল একবার কল হবে।
৩. _.throttle() - থ্রোটলিং
_.throttle() ফাংশনটি নির্দিষ্ট সময়ের মধ্যে একাধিক কলকে সীমিত করে, অর্থাৎ, একটি ফাংশন শুধুমাত্র নির্দিষ্ট সময়ের মধ্যে একবার রান করবে। এটি স্ক্রলিং, স্কেলিং বা অন্যান্য ইভেন্টগুলির জন্য ব্যবহৃত হয়, যাতে অপ্রয়োজনীয় কার্যকলাপ কমানো যায়।
উদাহরণ:
var handleScroll = _.throttle(function() {
console.log("Scrolling!");
}, 500);
window.addEventListener("scroll", handleScroll);
এখানে, _.throttle() ফাংশনটি স্ক্রলিং ইভেন্টে 500 মিলিসেকেন্ডে একবার কল হবে, যাতে বারবার কলের ফলে সিস্টেম স্লো না হয়ে যায়।
৪. _.once() - একবার কল হওয়া
_.once() ফাংশনটি একটি ফাংশনকে একবারই কল হতে দেয়। প্রথম কলের পর, এটি আর কখনও কল হবে না। এটি এমন পরিস্থিতিতে ব্যবহৃত হয় যেখানে একটি ফাংশন শুধুমাত্র একবারই রান করা উচিত।
উদাহরণ:
var initialize = _.once(function() {
console.log("Initialization complete!");
});
initialize(); // "Initialization complete!"
initialize(); // No output
এখানে, initialize ফাংশনটি শুধুমাত্র একবারই রান করবে, পরবর্তী কলগুলিতে কিছুই হবে না।
৫. _.partial() - আর্গুমেন্ট বাউন্ডিং
_.partial() একটি ফাংশন তৈরি করে যা কিছু আর্গুমেন্ট আগে থেকেই বাউন্ড (bind) করে রাখে, এবং পরবর্তীতে বাকি আর্গুমেন্টগুলি প্রদান করা হয়।
উদাহরণ:
var greet = function(greeting, name) {
console.log(greeting + ", " + name);
};
var greetHello = _.partial(greet, "Hello");
greetHello("Alice"); // "Hello, Alice"
greetHello("Bob"); // "Hello, Bob"
এখানে, _.partial() ফাংশনটি greet ফাংশনের প্রথম আর্গুমেন্টকে "Hello" হিসেবে বাউন্ড করে রাখে, এবং পরবর্তী আর্গুমেন্টগুলি আলাদা করে সরবরাহ করা হয়।
সারাংশ
Underscore.js Function Functions-এর সাহায্যে ফাংশনাল প্রোগ্রামিং কৌশলগুলো সহজ এবং কার্যকরভাবে JavaScript কোডে প্রয়োগ করা সম্ভব। এতে কিছু গুরুত্বপূর্ণ ফাংশন রয়েছে যা কোডকে আরও কার্যকরী, দ্রুত এবং পুনঃব্যবহারযোগ্য করে তোলে, যেমন _.bind(), _.debounce(), _.throttle(), _.once(), এবং _.partial()। এগুলো ফাংশনাল প্রোগ্রামিংয়ের মৌলিক ধারণাগুলি ব্যবহার করে, JavaScript ডেভেলপমেন্টকে আরও দক্ষ করে তোলে।
_.bind ফাংশন
Underscore.js এর _.bind() ফাংশনটি একটি ফাংশনকে নির্দিষ্ট this কনটেক্সটে বাউন্ড (bind) করতে ব্যবহৃত হয়। অর্থাৎ, আপনি যখন একটি ফাংশনকে .bind() দিয়ে কল করবেন, তখন সেই ফাংশনটি একটি নির্দিষ্ট অবজেক্টকে this হিসাবে গ্রহণ করবে, এমনকি সেই ফাংশনটি অন্য কোনো কনটেক্সটে প্রয়োগ করা হলেও।
_.bind এর মূল উদ্দেশ্য:
thisকনটেক্সট পরিবর্তন করা, যাতে ফাংশনটি নির্দিষ্ট অবজেক্টে কাজ করে।- ফাংশনকে নতুন আর্গুমেন্টসহ বাউন্ড করা।
উদাহরণ:
let person = {
name: "John",
greet: function() {
console.log("Hello, " + this.name);
}
};
let greetJohn = _.bind(person.greet, person);
greetJohn(); // "Hello, John"
এখানে, person.greet ফাংশনটিকে person অবজেক্টের this কনটেক্সটে বাউন্ড করা হয়েছে। এর মানে হল যে greetJohn ফাংশনটি যখন কল হবে, তখন this হবে person এবং এটি সঠিকভাবে name প্রপার্টি অ্যাক্সেস করতে পারবে।
_.partial ফাংশন
Underscore.js এর _.partial() ফাংশনটি একটি ফাংশনকে আংশিকভাবে প্রি-ফিল্ড (pre-filled) আর্গুমেন্ট সহ বাউন্ড করতে ব্যবহৃত হয়। এর মানে হলো আপনি ফাংশনটির কিছু আর্গুমেন্ট আগেই প্রদান করতে পারেন, এবং বাকি আর্গুমেন্ট পরে দিয়ে ফাংশনটি কল করতে পারবেন।
_.partial এর মূল উদ্দেশ্য:
- একটি ফাংশনের আর্গুমেন্ট প্রি-ফিল্ড করা।
- ফাংশনকে আংশিকভাবে প্রস্তুত করা, যাতে পরে আরও আর্গুমেন্টের সাথে এটি কল করা যায়।
উদাহরণ:
let greet = function(greeting, name) {
console.log(greeting + ", " + name);
};
// আংশিকভাবে প্রি-ফিল্ড আর্গুমেন্ট
let greetHello = _.partial(greet, "Hello");
greetHello("John"); // "Hello, John"
greetHello("Jane"); // "Hello, Jane"
এখানে, greet ফাংশনটি একটি আর্গুমেন্ট greeting এবং একটি আর্গুমেন্ট name গ্রহণ করে। আমরা _.partial() ব্যবহার করে greeting আর্গুমেন্টটি Hello দিয়ে আংশিকভাবে পূর্ণ করেছি এবং পরে name আর্গুমেন্ট দিয়ে এটি কল করেছি।
_.bind এবং _.partial এর মধ্যে পার্থক্য
_.bind: এটি একটি ফাংশনকে একটি নির্দিষ্টthisকনটেক্সটে বাউন্ড করতে ব্যবহৃত হয় এবং আপনি এটি কল করার সময় আর্গুমেন্ট পাস করতে পারেন। এটি মূলতthisকনটেক্সট নিয়ন্ত্রণ করে।_.partial: এটি একটি ফাংশনকে আংশিকভাবে আর্গুমেন্ট দিয়ে বাউন্ড করে, এবং পরবর্তীতে আপনি বাকি আর্গুমেন্ট পাস করে ফাংশনটি কল করতে পারেন। এটি মূলত আর্গুমেন্ট নিয়ন্ত্রণ করে।
_.bind এবং _.partial এর সমন্বয়ে ব্যবহার
এই দুটি ফাংশন একত্রে ব্যবহার করে আপনি একটি ফাংশনকে নির্দিষ্ট this কনটেক্সটে এবং আর্গুমেন্টের সাথে ফিক্সড করে কল করতে পারেন। এর মাধ্যমে আরও নমনীয় এবং পুনঃব্যবহারযোগ্য কোড তৈরি করা সম্ভব।
উদাহরণ:
let person = {
name: "Alice",
greet: function(greeting, punctuation) {
console.log(greeting + ", " + this.name + punctuation);
}
};
// _.bind দিয়ে this বাউন্ড করা এবং _.partial দিয়ে আর্গুমেন্ট প্রি-ফিল্ড করা
let greetAlice = _.partial(_.bind(person.greet, person), "Hello");
greetAlice("!"); // "Hello, Alice!"
greetAlice("."); // "Hello, Alice."
এখানে, আমরা প্রথমে person.greet ফাংশনটিকে person অবজেক্টের this কনটেক্সটে বাউন্ড করেছি _.bind ব্যবহার করে। তারপর, _.partial দিয়ে greeting আর্গুমেন্টটি Hello দিয়ে পূর্ণ করেছি এবং পরবর্তীতে punctuation আর্গুমেন্টটি পাস করেছি।
সারাংশ
_.bindএবং_.partialহল Underscore.js এর শক্তিশালী ফাংশন, যা JavaScript-এ ফাংশনাল প্রোগ্রামিংয়ের সুবিধা প্রদান করে।_.bindফাংশনটিthisকনটেক্সট বাউন্ড করতে ব্যবহৃত হয়, যখন_.partialফাংশনটি আংশিকভাবে আর্গুমেন্ট পূর্ণ করতে ব্যবহৃত হয়।- একত্রে ব্যবহারের মাধ্যমে, আপনি ফাংশনকে একটি নির্দিষ্ট কনটেক্সটে এবং আর্গুমেন্টের সাথে সহজে কাস্টমাইজ করে কাজ করতে পারবেন।
এই দুটি ফাংশনের মাধ্যমে কোডিং আরও পরিষ্কার, দ্রুত এবং পুনঃব্যবহারযোগ্য হয়ে ওঠে।
_.debounce এবং _.throttle কি?
_.debounce এবং _.throttle হল Underscore.js লাইব্রেরির দুটি গুরুত্বপূর্ণ ফাংশন যা ফাংশন কন্ট্রোল এবং অপ্টিমাইজেশনের জন্য ব্যবহৃত হয়। এগুলি সাধারণত তখন ব্যবহার করা হয় যখন আপনি একটি ফাংশনকে বারবার কল করতে চান না, বিশেষত যখন এটি ইউজারের ইন্টারঅ্যাকশনের উপর ভিত্তি করে কার্যকরী হয়, যেমন স্ক্রোলিং, টাইপিং, বা উইন্ডো রিসাইজ করা।
_.debounce: এটি একটি ফাংশনকে নির্দিষ্ট সময় পর্যন্ত বিলম্বিত করে এবং একাধিক কল একত্রিত করতে সহায়তা করে। এটি কোনও নির্দিষ্ট সময়ের মধ্যে একাধিক ফাংশন কল হলে শুধুমাত্র শেষটি চালানো হয়।_.throttle: এটি একটি ফাংশনকে নির্দিষ্ট সময় অন্তর অন্তর একবারই কল করতে দেয়। এতে ফাংশন একটানা চলতে থাকে না, বরং নির্দিষ্ট সময় ব্যবধানে চলে।
এই দুটি ফাংশন মূলত ব্যবহারকারী অভিজ্ঞতা উন্নত করতে সহায়তা করে এবং কার্যকরীভাবে কর্মক্ষমতা উন্নত করে।
_.debounce এর ব্যবহার
_.debounce ফাংশনটি খুবই উপকারী যখন আপনাকে একটি ফাংশন বারবার কল করা থেকে রোধ করতে হয়, বিশেষ করে ইউজারের দ্রুত ইনপুট বা ইন্টারঅ্যাকশনে যেমন স্ক্রোলিং, টাইপিং ইত্যাদিতে। এটি ব্যবহারকারী ইনপুটের মধ্যে নির্দিষ্ট সময়ের বিরতি দিয়ে ফাংশন চালানোর সুযোগ দেয়।
উদাহরণ: _.debounce ব্যবহার করে ইনপুট টাইপিং কন্ট্রোল
ধরা যাক, আপনি একটি সার্চ বক্সে টাইপ করার সময় সার্চ ফলাফল রিফ্রেশ করতে চান, কিন্তু প্রতিটি টাইপ করার সাথে সাথে সার্চ ফাংশন কল না করে, কিছু বিলম্বে একবারই কল করতে চান।
// Function to simulate API call or search
function search(query) {
console.log("Searching for:", query);
}
// Debouncing the search function
var debouncedSearch = _.debounce(search, 500); // 500ms delay
// Event listener for the input field
document.getElementById('search-box').addEventListener('input', function(event) {
debouncedSearch(event.target.value); // Call the debounced search function
});
এখানে, যখন ইউজার টাইপ করতে শুরু করবে, search ফাংশনটি প্রতি 500 মিলিসেকেন্ডে একবারই কল হবে, যদি ইউজার দ্রুত টাইপ না করেন। এতে unnecessary API calls কমে যাবে।
_.throttle এর ব্যবহার
_.throttle একটি ফাংশনকে নির্দিষ্ট সময় ব্যবধানে একবার কল করতে সাহায্য করে। এটি সাধারণত ব্যবহার করা হয় যখন আপনি এমন কাজ করতে চান যেগুলি খুবই দ্রুত পুনরাবৃত্তি হয় (যেমন, স্ক্রোলিং বা উইন্ডো রিসাইজ) কিন্তু আপনি চান যে এটি খুব দ্রুত না চলে।
উদাহরণ: _.throttle ব্যবহার করে স্ক্রোলিং কন্ট্রোল
ধরা যাক, আপনি পেজ স্ক্রোলিং-এর সময় পজিশন ট্র্যাক করতে চান, কিন্তু স্ক্রোল ইভেন্ট খুব দ্রুত ঘটে এবং বারবার ফাংশন কল করে। আমরা _.throttle ব্যবহার করে স্ক্রোল ইভেন্টটি সীমিত করব।
// Function to handle scroll event
function handleScroll() {
console.log("Scroll position:", window.scrollY);
}
// Throttling the scroll function to run only once every 200ms
var throttledScroll = _.throttle(handleScroll, 200);
// Event listener for the scroll event
window.addEventListener('scroll', throttledScroll);
এখানে, স্ক্রোল ইভেন্ট প্রতি 200 মিলিসেকেন্ডে একবারই handleScroll ফাংশন কল হবে। এটি স্ক্রোলিং ইভেন্টের উপর বেশি চাপ ফেলার আগেই কার্যকরী হয়।
_.debounce এবং _.throttle এর মধ্যে পার্থক্য
| বৈশিষ্ট্য | _.debounce | _.throttle |
|---|---|---|
| কাজের ধরন | বিলম্বিত ফাংশন কল। নির্দিষ্ট সময়ের মধ্যে একাধিক কল একত্রিত হয় এবং শেষটি কল হয়। | নির্দিষ্ট সময়ের মধ্যে একাধিক কল প্রতিরোধ করা হয়, কিন্তু ফাংশন নির্দিষ্ট সময় ব্যবধানে একবার কল হবে। |
| ব্যবহার | ইউজার ইনপুট (টিপিং, সার্চ, উইন্ডো রিসাইজ) ক্ষেত্রে, যখন আপনি একাধিক কল না করতে চান। | স্ক্রোলিং, উইন্ডো রিসাইজ বা থিম চেঞ্জের মতো ক্রমাগত ইভেন্টে। |
| ফাংশন কল | শুধুমাত্র শেষ ইনপুট বা ইভেন্ট কল হয়। | নির্দিষ্ট সময়ের মধ্যে একবার কল হয়। |
| রিটার্ন টাইপ | শেষ আর্গুমেন্ট গ্রহণ করা হয় এবং ফাংশন কল করা হয়। | ফাংশন কলের সময় নির্ধারণ করা হয়। |
সারাংশ
_.debounce এবং _.throttle ফাংশনালিটি Underscore.js লাইব্রেরির অত্যন্ত কার্যকরী টুল যা ব্যবহারকারীর ইন্টারঅ্যাকশনের উপর ভিত্তি করে ফাংশন কন্ট্রোল করে। _.debounce ইভেন্টগুলিকে বিলম্বিত করতে সাহায্য করে, যাতে ফাংশনটি শুধু একবারই কল হয়, যখন ইউজার দ্রুত ইনপুট দেয়। অন্যদিকে, _.throttle ফাংশনটি নির্দিষ্ট সময় অন্তর অন্তর একটি ফাংশন চালাতে সাহায্য করে, যা একাধিক দ্রুত পুনরাবৃত্তি কল প্রতিরোধ করতে কার্যকর। এই দুটি ফাংশনই ওয়েব অ্যাপ্লিকেশনের পারফরম্যান্স এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে সাহায্য করে।
_.debounce এবং _.throttle কি?
_.debounce এবং _.throttle হল Underscore.js লাইব্রেরির দুটি গুরুত্বপূর্ণ ফাংশন যা ফাংশন কন্ট্রোল এবং অপ্টিমাইজেশনের জন্য ব্যবহৃত হয়। এগুলি সাধারণত তখন ব্যবহার করা হয় যখন আপনি একটি ফাংশনকে বারবার কল করতে চান না, বিশেষত যখন এটি ইউজারের ইন্টারঅ্যাকশনের উপর ভিত্তি করে কার্যকরী হয়, যেমন স্ক্রোলিং, টাইপিং, বা উইন্ডো রিসাইজ করা।
_.debounce: এটি একটি ফাংশনকে নির্দিষ্ট সময় পর্যন্ত বিলম্বিত করে এবং একাধিক কল একত্রিত করতে সহায়তা করে। এটি কোনও নির্দিষ্ট সময়ের মধ্যে একাধিক ফাংশন কল হলে শুধুমাত্র শেষটি চালানো হয়।_.throttle: এটি একটি ফাংশনকে নির্দিষ্ট সময় অন্তর অন্তর একবারই কল করতে দেয়। এতে ফাংশন একটানা চলতে থাকে না, বরং নির্দিষ্ট সময় ব্যবধানে চলে।
এই দুটি ফাংশন মূলত ব্যবহারকারী অভিজ্ঞতা উন্নত করতে সহায়তা করে এবং কার্যকরীভাবে কর্মক্ষমতা উন্নত করে।
_.debounce এর ব্যবহার
_.debounce ফাংশনটি খুবই উপকারী যখন আপনাকে একটি ফাংশন বারবার কল করা থেকে রোধ করতে হয়, বিশেষ করে ইউজারের দ্রুত ইনপুট বা ইন্টারঅ্যাকশনে যেমন স্ক্রোলিং, টাইপিং ইত্যাদিতে। এটি ব্যবহারকারী ইনপুটের মধ্যে নির্দিষ্ট সময়ের বিরতি দিয়ে ফাংশন চালানোর সুযোগ দেয়।
উদাহরণ: _.debounce ব্যবহার করে ইনপুট টাইপিং কন্ট্রোল
ধরা যাক, আপনি একটি সার্চ বক্সে টাইপ করার সময় সার্চ ফলাফল রিফ্রেশ করতে চান, কিন্তু প্রতিটি টাইপ করার সাথে সাথে সার্চ ফাংশন কল না করে, কিছু বিলম্বে একবারই কল করতে চান।
// Function to simulate API call or search
function search(query) {
console.log("Searching for:", query);
}
// Debouncing the search function
var debouncedSearch = _.debounce(search, 500); // 500ms delay
// Event listener for the input field
document.getElementById('search-box').addEventListener('input', function(event) {
debouncedSearch(event.target.value); // Call the debounced search function
});
এখানে, যখন ইউজার টাইপ করতে শুরু করবে, search ফাংশনটি প্রতি 500 মিলিসেকেন্ডে একবারই কল হবে, যদি ইউজার দ্রুত টাইপ না করেন। এতে unnecessary API calls কমে যাবে।
_.throttle এর ব্যবহার
_.throttle একটি ফাংশনকে নির্দিষ্ট সময় ব্যবধানে একবার কল করতে সাহায্য করে। এটি সাধারণত ব্যবহার করা হয় যখন আপনি এমন কাজ করতে চান যেগুলি খুবই দ্রুত পুনরাবৃত্তি হয় (যেমন, স্ক্রোলিং বা উইন্ডো রিসাইজ) কিন্তু আপনি চান যে এটি খুব দ্রুত না চলে।
উদাহরণ: _.throttle ব্যবহার করে স্ক্রোলিং কন্ট্রোল
ধরা যাক, আপনি পেজ স্ক্রোলিং-এর সময় পজিশন ট্র্যাক করতে চান, কিন্তু স্ক্রোল ইভেন্ট খুব দ্রুত ঘটে এবং বারবার ফাংশন কল করে। আমরা _.throttle ব্যবহার করে স্ক্রোল ইভেন্টটি সীমিত করব।
// Function to handle scroll event
function handleScroll() {
console.log("Scroll position:", window.scrollY);
}
// Throttling the scroll function to run only once every 200ms
var throttledScroll = _.throttle(handleScroll, 200);
// Event listener for the scroll event
window.addEventListener('scroll', throttledScroll);
এখানে, স্ক্রোল ইভেন্ট প্রতি 200 মিলিসেকেন্ডে একবারই handleScroll ফাংশন কল হবে। এটি স্ক্রোলিং ইভেন্টের উপর বেশি চাপ ফেলার আগেই কার্যকরী হয়।
_.debounce এবং _.throttle এর মধ্যে পার্থক্য
| বৈশিষ্ট্য | _.debounce | _.throttle |
|---|---|---|
| কাজের ধরন | বিলম্বিত ফাংশন কল। নির্দিষ্ট সময়ের মধ্যে একাধিক কল একত্রিত হয় এবং শেষটি কল হয়। | নির্দিষ্ট সময়ের মধ্যে একাধিক কল প্রতিরোধ করা হয়, কিন্তু ফাংশন নির্দিষ্ট সময় ব্যবধানে একবার কল হবে। |
| ব্যবহার | ইউজার ইনপুট (টিপিং, সার্চ, উইন্ডো রিসাইজ) ক্ষেত্রে, যখন আপনি একাধিক কল না করতে চান। | স্ক্রোলিং, উইন্ডো রিসাইজ বা থিম চেঞ্জের মতো ক্রমাগত ইভেন্টে। |
| ফাংশন কল | শুধুমাত্র শেষ ইনপুট বা ইভেন্ট কল হয়। | নির্দিষ্ট সময়ের মধ্যে একবার কল হয়। |
| রিটার্ন টাইপ | শেষ আর্গুমেন্ট গ্রহণ করা হয় এবং ফাংশন কল করা হয়। | ফাংশন কলের সময় নির্ধারণ করা হয়। |
সারাংশ
_.debounce এবং _.throttle ফাংশনালিটি Underscore.js লাইব্রেরির অত্যন্ত কার্যকরী টুল যা ব্যবহারকারীর ইন্টারঅ্যাকশনের উপর ভিত্তি করে ফাংশন কন্ট্রোল করে। _.debounce ইভেন্টগুলিকে বিলম্বিত করতে সাহায্য করে, যাতে ফাংশনটি শুধু একবারই কল হয়, যখন ইউজার দ্রুত ইনপুট দেয়। অন্যদিকে, _.throttle ফাংশনটি নির্দিষ্ট সময় অন্তর অন্তর একটি ফাংশন চালাতে সাহায্য করে, যা একাধিক দ্রুত পুনরাবৃত্তি কল প্রতিরোধ করতে কার্যকর। এই দুটি ফাংশনই ওয়েব অ্যাপ্লিকেশনের পারফরম্যান্স এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে সাহায্য করে।
_.delay এবং _.defer কি?
_.delay এবং _.defer হল Underscore.js লাইব্রেরির দুটি ফাংশন যা আপনাকে একটি ফাংশন নির্দিষ্ট সময় পরে চালানোর জন্য ব্যবহৃত হয়। এই দুটি ফাংশন মূলত ফাংশন বিলম্বিত (delayed) করার জন্য ব্যবহৃত হলেও, তাদের মধ্যে একটি গুরুত্বপূর্ণ পার্থক্য রয়েছে।
_.delay(): এটি একটি নির্দিষ্ট সময় পর একটি ফাংশন চালানোর জন্য ব্যবহৃত হয়। আপনি যতো সময় নির্ধারণ করবেন, ফাংশনটি ওই সময় পরে একবার রান করবে।_.defer(): এটি_.delay()এর মতোই, তবে এটি ফাংশনটি বর্তমান কল স্ট্যাকের পর এক্সিকিউট করার জন্য ব্যবহৃত হয়। অর্থাৎ, এটি ফাংশনটি তখন চালাবে যখন কল স্ট্যাকের কাজ সম্পন্ন হবে (যেমন, ব্রাউজারের রেন্ডারিং কাজগুলো আগে সম্পন্ন হবে)।
_.delay এর ব্যবহার
_.delay ফাংশনটি নির্দিষ্ট সময় পরে একটি ফাংশন চালাতে ব্যবহার করা হয়। এটি প্রথম আর্গুমেন্ট হিসেবে ফাংশন গ্রহণ করে এবং দ্বিতীয় আর্গুমেন্ট হিসেবে বিলম্বের সময় (মিলিসেকেন্ড) প্রদান করা হয়।
সিনট্যাক্স:
_.delay(function, wait, [args]);
function: যেই ফাংশনটি আপনি বিলম্বিত করতে চান।wait: মিলিসেকেন্ডে বিলম্বের সময়।[args]: (অপশনাল) ফাংশনের আর্গুমেন্ট, যেগুলো বিলম্বিত ফাংশনের সাথে পাঠানো হবে।
উদাহরণ:
_.delay(function() {
console.log("This message is delayed by 2 seconds!");
}, 2000);
আউটপুট:
This message is delayed by 2 seconds!
এখানে, ফাংশনটি ২ সেকেন্ড পর রান করবে।
আরেকটি উদাহরণ:
function greet(name) {
console.log("Hello, " + name);
}
_.delay(greet, 3000, "John");
আউটপুট:
Hello, John
এখানে, greet ফাংশনটি ৩ সেকেন্ড পর "John" প্যারামিটার সহ রান হবে।
_.defer এর ব্যবহার
_.defer ফাংশনটি _.delay() এর মতোই, তবে এটি ফাংশনটি চলমান কল স্ট্যাকের পর এক্সিকিউট করতে ব্যবহৃত হয়। এর মানে হল যে, এটি ফাংশনটি কল স্ট্যাকের কাজ শেষ হওয়ার পর রান করবে, কিন্তু আপনি কোনো বিলম্ব (delay) নির্ধারণ করতে পারবেন না। এটি একটি setTimeout এর মতো কাজ করে, কিন্তু সময় নির্ধারণ না করে।
সিনট্যাক্স:
_.defer(function, [args]);
function: যেই ফাংশনটি আপনি defer করতে চান।[args]: (অপশনাল) ফাংশনের আর্গুমেন্ট।
উদাহরণ:
_.defer(function() {
console.log("This message is deferred!");
});
আউটপুট:
This message is deferred!
এখানে, ফাংশনটি বর্তমান কল স্ট্যাকের কাজ শেষ হওয়ার পর এক্সিকিউট হবে।
আরেকটি উদাহরণ:
function greet(name) {
console.log("Hello, " + name);
}
_.defer(greet, "Alice");
আউটপুট:
Hello, Alice
এখানে, greet ফাংশনটি কল স্ট্যাকের কাজ শেষ হওয়ার পর "Alice" প্যারামিটার সহ রান হবে।
_.delay এবং _.defer এর মধ্যে পার্থক্য
| বৈশিষ্ট্য | _.delay() | _.defer() |
|---|---|---|
| বিলম্বের সময় | আপনি নির্দিষ্ট সময় (মিলিসেকেন্ড) প্রদান করতে পারেন | কোনো বিলম্ব নির্ধারণ করা হয় না, এটি কল স্ট্যাকের পর রান হয় |
| ফাংশন এক্সিকিউশন | নির্দিষ্ট সময় পর এক্সিকিউট হয় | কল স্ট্যাকের কাজ শেষ হওয়ার পর এক্সিকিউট হয় |
| ব্যবহার | নির্দিষ্ট সময় পর এক্সিকিউট করা প্রয়োজন | কল স্ট্যাকের কাজ শেষ হওয়ার পর ফাংশন এক্সিকিউট করা প্রয়োজন |
সারাংশ
_.delay()আপনাকে একটি ফাংশন নির্দিষ্ট সময় পরে রান করানোর সুযোগ দেয়। এটি বিলম্বের সময় মিলিসেকেন্ডে নির্ধারণ করে।_.defer()ফাংশনটি কল স্ট্যাকের কাজ শেষ হওয়ার পর ফাংশনটি এক্সিকিউট করে, তবে এটি কোনো নির্দিষ্ট বিলম্ব নির্ধারণ করতে দেয় না।
এই দুটি ফাংশন JavaScript এর setTimeout ফাংশনের মতো কাজ করে, কিন্তু এগুলোর নিজস্ব ব্যবহারের পরিস্থিতি এবং সুবিধা রয়েছে। _.delay() নির্দিষ্ট সময় বিলম্বিত করতে ব্যবহৃত হয়, আর _.defer() কল স্ট্যাকের কাজ শেষ হওয়ার পর ফাংশন রান করতে ব্যবহৃত হয়।
Read more