ডিবাউন্সিং
ডিবাউন্সিং হলো অনাবশ্যক এবং সময়সাপেক্ষ কম্পিউটেশন কমিয়ে ব্রাউজার পারফরম্যান্স বাড়ানোর একটি কৌশল। কিছু পরিস্থিতিতে কিছু ফাংশনালিটি চালানোর জন্য বেশি সময় লাগে। উদাহরণস্বরূপ, একটি ই-কমার্স ওয়েবসাইটের সার্চবার।
বিবরণ
মান लीজিয়ে একজন ইউজার "Tutorix study kit" খুঁজতে চায়। সে সার্চবারে প্রতিটি ক্যারেক্টার টাইপ করে। প্রতিটি ক্যারেক্টার টাইপ করার পর ব্রাউজার থেকে সার্ভারে একটি API কল হয় প্রোডাক্ট পাওয়ার জন্য। "Tutorix study kit" টাইপ করতে ইউজারের ১৭ বার API কল করতে হয়। মিলিয়ন মিলিয়ন লোক একসাথে সার্চ করলে বিলিয়ন বিলিয়ন API কল হয়, যা ব্রাউজারকে ধীর করে দেয়। এই সমস্যা সমাধান করতে ডিবাউন্সিং এসে পড়ে।
এই পরিস্থিতিতে, ডিবাউন্সিং দুটি কীস্ট্রোকের মধ্যে একটি টাইম ইন্টারভাল (যেমন ২ সেকেন্ড) সেট করে। যদি দুটি কীস্ট্রোকের মধ্যবর্তী সময় ২ সেকেন্ড ছাড়া, তবেই API কল হবে। এই ২ সেকেন্ডে ইউজার আরও কিছু ক্যারেক্টার টাইপ করতে পারে, ফলে API কলের সংখ্যা কমে যাবে এবং ব্রাউজার পারফরম্যান্স বাড়বে। মনে রাখবেন, ডিবাউন্সিং ফাংশন প্রতিটি কীস্ট্রোকে আপডেট হয়।
উদাহরণ সারাংশ
নিচের উদাহরণে একটি বাটনে ইভেন্ট লিসেনার সংযুক্ত করা হয়েছে যা একটি ডিবাউন্স ফাংশন কল করে। ডিবাউন্স ফাংশনে দুটি প্যারামিটার থাকে: একটি ফাংশন এবং একটি নম্বর (সময়)। একটি টাইমার ডিক্লেয়ার করা হয়েছে যা নির্দিষ্ট সময়ের পর ডিবাউন্স ফাংশন কল করে।
যখন ডিবাউন্স বাটনে ক্লিক করা হয়, একটি অ্যালার্ট বক্স খুলে এবং একটি মেসেজ দেখায়। ফাংশন প্রতিবার আপডেট হয়, অর্থাৎ যদি বাটনটি ডিলে টাইম (২ সেকেন্ড) শেষ হওয়ার আগে আবার ক্লিক করা হয়, তবে প্রাথমিক টাইমার ক্লিয়ার হয়ে যায় এবং নতুন টাইমার শুরু হয়। এই কাজটি clearTimeout() ফাংশন দিয়ে করা হয়।
উদাহরণ
<html> <body> <input type = "button" id="debounce" value = "Debounce"> <script> var button = document.getElementById("debounce"); var debounce = (func, delay) => { let timer; return function() { const context = this; const args = arguments; clearTimeout(timer); timer = setTimeout(() => func.apply(context, args), delay); } } button.addEventListener('click', debounce(function() { alert("Hello\nNo matter how many times you" + "click the debounce button, I get " + "executed once every 2 seconds!!")}, 2000)); </script> </body> </html>উপরোক্ত ফাংশন এক্সিকিউট করার পর নিচের বাটনটি প্রদর্শিত হবে।
বাটনে ক্লিক করে ২ সেকেন্ড অপেক্ষা করার পর নিচের অ্যালার্ট বক্স আউটপুট হিসেবে দেখাবে।
আউটপুট
