برنامه نویسی

تکنیک را در JavaScript – Community Dev

let debounceTimer;
const searchBox = document.getElementById('search-box');

searchBox.addEventListener('input', function(event) {
  clearTimeout(debounceTimer); // আগের টাইমার বন্ধ করে নতুন টাইমার সেট করা হয়
  debounceTimer = setTimeout(function() {
    console.log("Searching for:", event.target.value);
  }, 500); // ৫০০ মিলিসেকেন্ড (০.৫ সেকেন্ড) পর এক্সিকিউট হবে
});

حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

Explaination

  • هنگامی که یک نامه را تایپ می کنید ، رویداد ورودی ماشه است و کد زیر اجرا می شود:
clearTimeout(debounceTimer);
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

Explaination

  • تایمر جدید تنظیم شده است:
debounceTimer = setTimeout(function() {
    console.log("Searching for:", event.target.value);
}, 500);

حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

Explaination

  • تایمر جدید تنظیم شده است:
debounceTimer = setTimeout(function() {
    console.log("Searching for:", event.target.value);
}, 500);

حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

  • آمده است: “صبر کنید 1 میلی ثانیه (1.5 ثانیه) ، سپس جستجو کنید.”
  • اگر دوباره تایپ کنید (در فاصله 1.5 ثانیه) ، تایمر قبلی لغو می شود
    • یعنی اگر سریع تایپ می کنید ، هر بار ClearTimeOut () SettimeOut قبلی را حذف می کند و تعداد 5ms جدید را شروع می کند.
    • عملیات جستجو تنها زمانی خواهد بود که کاربر پس از نوشتن آخرین نامه 1.5 ثانیه متوقف شود.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا