ডিবাউন্সিং
ডিবাউন্সিং ব্রাউজারের কর্মক্ষমতা বৃদ্ধি করার জন্য অপ্রয়োজনীয় সময় গ্রাসকারী গণনা হ্রাস করা ছাড়া কিছুই নয়। এমন কিছু পরিস্থিতি রয়েছে যেখানে কিছু কার্যকারিতা একটি নির্দিষ্ট অপারেশন চালানোর জন্য বেশি সময় নেয়। উদাহরণস্বরূপ, একটি সার্চ বার -এর উদাহরণ নিন একটি ই-কমার্স ওয়েবসাইটে।
ডিব্রিফ
ধরুন একজন ব্যবহারকারী "Tutorix স্টাডি কিট" পেতে চান . তিনি সার্চ বারে পণ্যের প্রতিটি অক্ষর টাইপ করেন। প্রতিটি অক্ষর টাইপ করার পরে, একটি Api আছে প্রয়োজনীয় পণ্য পেতে ব্রাউজার থেকে সার্ভারে কল করা হয়। যেহেতু তিনি "টিউটরিক্স স্টাডি কিট" চান, তাই ব্যবহারকারীকে ব্রাউজার থেকে সার্ভারে 17টি Api কল করতে হবে। একটি দৃশ্যের কথা চিন্তা করুন যে যখন লক্ষ লক্ষ লোক সেখানে বিলিয়ন বিলিয়ন Api'sকে কল করে একই অনুসন্ধান করে . তাই একবারে বিলিয়ন বিলিয়ন এপিআই-কে কল করা অবশ্যই একটি ধীরে ব্রাউজার কার্যক্ষমতার দিকে নিয়ে যাবে . এই অপূর্ণতা কমাতে, ডিবাউন্সিং ছবিতে আসে৷
৷এই পরিস্থিতিতে, ডিবাউন্সিং একটি সময়ের ব্যবধান সেট করবে, ধরুন 2 সেকেন্ড, দুটি কীস্ট্রোকের মধ্যে। যদি দুটি কীস্ট্রোকের মধ্যে সময় 2 সেকেন্ডের বেশি হয়, তবে শুধুমাত্র Api কল করা হবে। এই 2 সেকেন্ডের মধ্যে ব্যবহারকারী অন্তত কিছু অক্ষর টাইপ করতে পারে, সেই অক্ষরগুলি Api কলিং কমিয়ে দেয়। যেহেতু এপিআই কলিং কমে গেছে, ব্রাউজারের কর্মক্ষমতা বাড়ানো হবে। একজনকে অবশ্যই খেয়াল রাখতে হবে যে ডিবাউন্সিং প্রতিটি কী স্ট্রোকের জন্য ফাংশন আপডেট।
উদাহরণ সারাংশ
নিম্নলিখিত উদাহরণে একটি বোতাম একটি ইভেন্ট লিসেনার এর সাথে সংযুক্ত আছে৷ যেটিকে debounce বলে ফাংশন ডিবাউন্স ফাংশন 2টি পরামিতি সহ দেওয়া হয়, একটি ফাংশন এবং অন্যটি একটি সংখ্যা (সময়)। একটি টাইমার ঘোষণা করা হয়, যা নাম অনুসারে কলগুলি ডিবাউন্স প্রস্তাব করে৷ একটি নির্দিষ্ট সময়ের পরে ফাংশন।
একবার debounce বোতামে ক্লিক করলে, একটি সতর্কতা বাক্স খোলে এবং একটি বার্তা প্রদর্শন করে। ফাংশনটি প্রতিবার আপডেট হয় যার অর্থ যদি বিলম্বের সময় (2 সেকেন্ড) আগে বোতামটি ক্লিক করা হয় তবে প্রাথমিক টাইমার সাফ হয়ে যাবে এবং নতুন টাইমার শুরু হবে। এই কাজটি অর্জন করতে 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> উপরের ফাংশনটি কার্যকর করার পরে নিম্নলিখিত বোতামটি প্রদর্শিত হবে
বোতামটি ক্লিক করার পরে এবং 2 সেকেন্ড অপেক্ষা করার পরে নিম্নলিখিত সতর্কতা বাক্সটি আউটপুট হিসাবে প্রদর্শিত হবে৷
আউটপুট
