জাভাস্ক্রিপ্টে, এমন পরিস্থিতি রয়েছে যখন আমাদের নিশ্চিত করতে হবে যে একটি নির্দিষ্ট সাইটে প্রবেশ করা বিষয়বস্তু সঠিক এবং আপ টু ডেট। উদাহরণস্বরূপ, একটি দীর্ঘ ফর্ম পূরণ করার সময় এবং নতুন পরিবর্তনগুলি পর্যবেক্ষণ করার সময় বা আপনি যখন একটি ওয়েবসাইট পরীক্ষা করতে চান তখন একটি ওয়েব পৃষ্ঠায় সাম্প্রতিক বিষয়বস্তু প্রদর্শন করা প্রয়োজন৷ এই ধরনের পরিস্থিতিতে, জাভাস্ক্রিপ্ট ব্যবহার করে প্রতি 5 সেকেন্ডে একটি ওয়েব পৃষ্ঠা স্বয়ংক্রিয়ভাবে রিফ্রেশ করা এই ধরনের পরিস্থিতি মোকাবেলায় খুব সহায়ক।
এই নিবন্ধটি জাভাস্ক্রিপ্ট ব্যবহার করে প্রতি 5 সেকেন্ডে একটি ওয়েব পৃষ্ঠা স্বয়ংক্রিয়ভাবে রিফ্রেশ করার পদ্ধতিগুলি নিয়ে আলোচনা করবে।
কিভাবে জাভাস্ক্রিপ্ট ব্যবহার করে প্রতি 5 সেকেন্ডে ওয়েব পেজ অটো রিফ্রেশ করবেন?
জাভাস্ক্রিপ্ট ব্যবহার করে প্রতি 5 সেকেন্ডে একটি ওয়েব পৃষ্ঠা স্বয়ংক্রিয়ভাবে রিফ্রেশ করতে, নিম্নলিখিত পদ্ধতিগুলি ব্যবহার করা যেতে পারে:
- ' সেট ইন্টারভাল() ' এবং ' document.querySelector() 'পদ্ধতি
- ' রিফ্রেশ() 'পদ্ধতি
- ' সেটটাইমআউট() 'পদ্ধতি
একের পর এক আলোচিত পদ্ধতির মাধ্যমে যান!
পদ্ধতি 1: setInterval() এবং document.querySelector() পদ্ধতি ব্যবহার করে জাভাস্ক্রিপ্টে প্রতি 5 সেকেন্ডে ওয়েব পেজ অটো রিফ্রেশ করুন
দ্য ' সেট ইন্টারভাল() ' পদ্ধতি নির্দিষ্ট সময়ের ব্যবধানে একটি ফাংশন অ্যাক্সেস করে এবং ' document.querySelector() ” পদ্ধতিটি একটি CSS নির্বাচকের সাথে মিলে যাওয়া প্রথম উপাদান পায়। এই পদ্ধতিগুলি নির্দিষ্ট শিরোনাম ট্যাগ অ্যাক্সেস করতে এবং একটি টাইমারের সাহায্যে একটি প্রয়োজনীয় কার্যকারিতার জন্য সময়ের ব্যবধান সেট করতে একত্রিতভাবে ব্যবহার করা যেতে পারে।
বাক্য গঠন
setInterval ( ফাংশন, মিলিসেকেন্ড, par1, par2 )উপরের সিনট্যাক্সে, ' ফাংশন ' যে ফাংশনটি অ্যাক্সেস করতে হবে তা বোঝায়, ' মিলিসেকেন্ড ' কার্যকর করার জন্য নির্দিষ্ট সময়ের ব্যবধান এবং ' জোড়া 1 ' এবং ' par2 ” হল অতিরিক্ত পরামিতি।
নথি querySelector ( সিএসএস নির্বাচক )
এখানে, ' সিএসএস নির্বাচক ” এক বা একাধিক CSS নির্বাচকদের প্রতিনিধিত্ব করে।
নিম্নলিখিত উদাহরণ দেখুন.
উদাহরণ
প্রথমে, যথাক্রমে
ট্যাগে একটি শিরোনাম এবং একটি শিরোনাম উল্লেখ করুন:
< শিরোনাম > পৃষ্ঠা প্রতি 5 সেকেন্ডে রিফ্রেশ করুন < / শিরোনাম >
< h2 শৈলী = 'টেক্সট-সারিবদ্ধ: বাম' > পৃষ্ঠাটি স্বয়ংক্রিয়ভাবে রিফ্রেশ করুন < / h2 >
এখন, একটি টাইমার মান সেট করুন ' 1 ”:
টাইমার যাক = 1 ;এর পরে, প্রয়োগ করুন ' সেট ইন্টারভাল() একটি 'সহ পদ্ধতি 1000ms 'মান। এটি প্রতি সেকেন্ডে টাইমার বৃদ্ধি করবে। এছাড়াও, 'এটি প্রদর্শন করতে নির্দিষ্ট শিরোনামটি অ্যাক্সেস করুন' ডকুমেন্ট অবজেক্ট মডেল (DOM) ” সেট টাইমার মান শেষে।
অবশেষে, “এর বৃদ্ধির সাথে টাইমারের মানটি পুনরাবৃত্তি করুন 1 ' ব্যবহার ' ++ 'পোস্ট ইনক্রিমেন্ট অপারেটর এবং এমনভাবে একটি শর্ত প্রয়োগ করুন যাতে মান 5 এর বেশি হলে, ' location.reload() ' পদ্ধতির ফলে উইন্ডোটি পুনরায় লোড হবে:
setInterval ( ( ) => {নথি querySelector ( 'h2' ) . অভ্যন্তরীণ পাঠ্য = টাইমার ;
টাইমার ++;
যদি ( টাইমার > 5 )
অবস্থান পুনরায় লোড ( ) ;
} , 1000 ) ;
এটা দেখা যায় যে আমাদের ওয়েব পৃষ্ঠা প্রতি পাঁচ সেকেন্ডে স্বয়ংক্রিয়ভাবে রিফ্রেশ হয়:
পদ্ধতি 2: অনলোড ইভেন্ট ব্যবহার করে জাভাস্ক্রিপ্টে প্রতি 5 সেকেন্ডে ওয়েব পেজ অটো রিফ্রেশ করুন
দ্য ' লোড একটি বস্তু লোড করা হলে ইভেন্টটি ট্রিগার হয়। ওয়েব পেজ লোড হলে ব্যবহারকারী-সংজ্ঞায়িত ফাংশনের সাহায্যে পৃষ্ঠাটি রিফ্রেশ করতে এই কৌশলটি প্রয়োগ করা যেতে পারে।
বাক্য গঠন
বস্তু লোড = সতেজ পৃষ্ঠা ( ) { মাইস্ক্রিপ্ট } ;প্রদত্ত সিনট্যাক্সে, ' ফাংশন ” বস্তুটি লোড করার সময় যে ফাংশনটি চালু করতে হবে তা বোঝায়।
নিম্নলিখিত উদাহরণ তাকান.
উদাহরণ
প্রথমত, পূর্ববর্তী পদ্ধতিতে আলোচিত একটি শিরোনাম এবং শিরোনাম অন্তর্ভুক্ত করুন:
< শিরোনাম > পৃষ্ঠা প্রতি 5 সেকেন্ডে রিফ্রেশ করুন < / শিরোনাম >< h2 > পৃষ্ঠাটি স্বয়ংক্রিয়ভাবে রিফ্রেশ করুন < / h2 >
এখন, প্রয়োগ করুন ' লোড 'ইভেন্ট এবং ফাংশন আহ্বান করুন' সতেজ পৃষ্ঠা() 'এবং পাস' 5000 যুক্তি হিসাবে যা পাঁচ সেকেন্ড সময় ব্যবধান নির্দেশ করে:
< বডি অনলোড = 'জাভাস্ক্রিপ্ট:রিফ্রেশ পৃষ্ঠা(5000);' >শরীর >
অবশেষে, 'নামক একটি ফাংশন সংজ্ঞায়িত করুন সতেজ পৃষ্ঠা() ' সঙ্গে ' t ” একটি যুক্তি হিসাবে যা ওয়েব পৃষ্ঠাটি স্বয়ংক্রিয়ভাবে রিফ্রেশ করার জন্য নির্ধারিত সময়ের উল্লেখ করছে। দ্য ' location.reload() ' পদ্ধতি নির্দিষ্ট সময়ের পরে পৃষ্ঠাটি পুনরায় লোড করবে:
ফাংশন refreshPage ( t ) {সেট টাইমআউট ( 'location.reload(true);' , টি ) ;
}
আউটপুট
পদ্ধতি 3: সেটটাইমআউট() পদ্ধতি ব্যবহার করে জাভাস্ক্রিপ্টে প্রতি 5 সেকেন্ডে ওয়েব পেজ অটো রিফ্রেশ করুন
দ্য ' সেটটাইমআউট() ' পদ্ধতি একটি নির্দিষ্ট নির্দিষ্ট সময়ের পরে একটি ফাংশন আহ্বান করে। এই পদ্ধতিটি একটি নির্দিষ্ট সেট টাইমআউটের পরে একটি ওয়েব পৃষ্ঠা পুনরায় লোড করতে প্রয়োগ করা যেতে পারে।
বাক্য গঠন
সেট টাইমআউট ( ফাংশন, মিলিসেকেন্ড, par1, par2 )প্রদত্ত সিনট্যাক্সে, ' ফাংশন ' অ্যাক্সেস করা ফাংশন বোঝায়, ' মিলিসেকেন্ড ' কার্যকর করার জন্য নির্দিষ্ট সময়ের ব্যবধান এবং ' জোড়া 1 ', ' par2 ” হল অতিরিক্ত পরামিতি।
উদাহরণ
HTML পৃষ্ঠার স্ক্রিপ্ট ট্যাগে, 'প্রয়োগ করুন সেটটাইমআউট() ” পদ্ধতিটি এমনভাবে যখন 5 সেকেন্ড পার হয়ে যায়, location.reload() পদ্ধতিটি ওয়েব পৃষ্ঠাটি পুনরায় লোড করে:
< লিপি >সেট টাইমআউট ( 'location.reload(true);' , 5000 ) ;
লিপি >
আউটপুট
আমরা জাভাস্ক্রিপ্ট ব্যবহার করে প্রতি 5 সেকেন্ডে একটি ওয়েব পৃষ্ঠা স্বয়ংক্রিয়ভাবে রিফ্রেশ করার সমস্ত সুবিধাজনক পদ্ধতি নিয়ে আলোচনা করেছি।
উপসংহার
জাভাস্ক্রিপ্ট ব্যবহার করে প্রতি 5 সেকেন্ডে একটি ওয়েব পৃষ্ঠা স্বয়ংক্রিয়ভাবে রিফ্রেশ করতে, ' সেট ইন্টারভাল() ' এবং ' document.querySelector() টাইমার মান সামঞ্জস্য করার পদ্ধতি, ' রিফ্রেশ() একটি ওয়েব পৃষ্ঠা রিফ্রেশ করার পদ্ধতি, বা ' সেটটাইমআউট() একটি ওয়েব পৃষ্ঠার একটি নির্দিষ্ট সময়সীমা রিফ্রেশ সীমা সেট করার জন্য পদ্ধতি। এই নিবন্ধটি জাভাস্ক্রিপ্ট ব্যবহার করে প্রতি 5 সেকেন্ডে একটি ওয়েব পৃষ্ঠা স্বয়ংক্রিয়ভাবে রিফ্রেশ করার পদ্ধতিগুলি প্রদর্শন করেছে৷