পৃষ্ঠাটি লোড হওয়ার পরে আমি একটি প্রভাব তৈরি করার চেষ্টা করছি এবং 5 সেকেন্ড পরে, পর্দার সাফল্যের বার্তাটি বিবর্ণ হয়ে যায় বা স্লাইড হয়ে যায়।
আমি কীভাবে এটি অর্জন করতে পারি?
পৃষ্ঠাটি লোড হওয়ার পরে আমি একটি প্রভাব তৈরি করার চেষ্টা করছি এবং 5 সেকেন্ড পরে, পর্দার সাফল্যের বার্তাটি বিবর্ণ হয়ে যায় বা স্লাইড হয়ে যায়।
আমি কীভাবে এটি অর্জন করতে পারি?
উত্তর:
জাভাস্ক্রিপ্ট সেটটাইমআউট অন্তর্নির্মিত ।
setTimeout(
function()
{
//do something special
}, 5000);
আপডেট : আপনি পৃষ্ঠাটি লোড করা শেষ হওয়ার পরে অপেক্ষা করতে চান, সুতরাং সেই কোডটি আপনার $(document).ready(...);স্ক্রিপ্টের ভিতরে রাখুন ।
আপডেট 2 : jquery 1.4.0 .delayপদ্ধতিটি চালু করেছে । এটি পরীক্ষা করে দেখুন । মনে রাখবেন যে .ডিলে কেবল jQuery ইফেক্টের সারিগুলির সাথে কাজ করে।
setTimeout।
একটি সাধারণ জাভাস্ক্রিপ্ট টাইমার ব্যবহার করুন:
$(function(){
function show_popup(){
$("#message").slideUp();
};
window.setTimeout( show_popup, 5000 ); // 5 seconds
});
এটি ডিওএম প্রস্তুত হওয়ার পরে 5 সেকেন্ড অপেক্ষা করবে। পৃষ্ঠাটি আসলে অপেক্ষা না করা পর্যন্ত loadedআপনি এটি ব্যবহার করতে হবে:
$(window).load(function(){
function show_popup(){
$("#message").slideUp();
};
window.setTimeout( show_popup, 5000 ); // 5 seconds
})
সম্পাদনা: ওপির মন্তব্যের setTimeoutজবাবে jQuery এ এটি করার কোনও উপায় আছে এবং উত্তরটি ব্যবহার করবেন না তা জিজ্ঞাসা করে না। তবে আপনি যদি এটি আরও "jQueryish" করতে চান তবে আপনি এটি এটিকে মোড়ানো করতে পারেন:
$.wait = function( callback, seconds){
return window.setTimeout( callback, seconds * 1000 );
}
আপনি তখন এটিকে এভাবে কল করতে পারেন:
$.wait( function(){ $("#message").slideUp() }, 5);
আমি এই প্রশ্নটি জুড়ে ছুটে এসেছি এবং আমি ভেবেছিলাম যে আমি এই বিষয়ে একটি আপডেট সরবরাহ করব। jQuery (v1.5 +) একটি Deferredমডেল অন্তর্ভুক্ত করে , যা ( jQuery 3 অবধি প্রতিশ্রুতিগুলি / একটি অনুপস্থিতিকে মেনে চলার পরেও ) সাধারণত অনেকগুলি অ্যাসিনক্রোনাস সমস্যার কাছে যাওয়ার জন্য একটি পরিষ্কার উপায় হিসাবে বিবেচিত হয়। $.wait()এই পদ্ধতির ব্যবহার করে কোনও পদ্ধতি প্রয়োগ করা আমার বিশ্বাসযোগ্যভাবে পাঠযোগ্য believe
$.wait = function(ms) {
var defer = $.Deferred();
setTimeout(function() { defer.resolve(); }, ms);
return defer;
};
এবং আপনি এটি কীভাবে ব্যবহার করতে পারেন তা এখানে:
$.wait(5000).then(disco);
তবে, যদি বিরতি দেওয়ার পরে, আপনি কেবলমাত্র একটি একক jQuery নির্বাচনের উপর ক্রিয়া সম্পাদন করতে চান, তবে আপনি jQuery এর নেটিভ ব্যবহার করা উচিত.delay() যা আমি বিশ্বাস করি যে ডুফের অধীনে ডিফার্ডকেও ব্যবহার করে:
$(".my-element").delay(5000).fadeIn();
setTimeout(function(){
},5000);
এর ভিতরে আপনার কোডটি রাখুন { }
300 = 0.3 seconds
700 = 0.7 seconds
1000 = 1 second
2000= 2 seconds
2200 = 2.2 seconds
3500 = 3.5 seconds
10000 = 10 seconds
প্রভৃতি
ক্লিক করে তাৎক্ষণিকভাবে বন্ধ হয়ে যেতে পারে বা এটি 10 সেকেন্ডের পরে একটি অটোক্লোজ করে এমন বার্তা ওভারলেয়ের জন্য এটি ব্যবহার করে চলেছে।
button = $('.status-button a', whatever);
if(button.hasClass('close')) {
button.delay(10000).queue(function() {
$(this).click().dequeue();
});
}
.delay()এবং এটি
আন্ডারস্কোর লাইব্রেরি এছাড়াও একটি "বিলম্ব" ফাংশন প্রদান করে:
_.delay(function(msg) { console.log(msg); }, 5000, 'Hello');
জোয়ের উত্তরের ভিত্তিতে, আমি একটি উদ্দেশ্য নিয়ে এসেছি (jQuery দ্বারা, 'সারি' সম্পর্কে পড়া) solution
এটি কিছুটা jQuery.animate () সিনট্যাক্স অনুসরণ করে - অন্যান্য এফএক্স ফাংশনগুলির সাথে শৃঙ্খলিত হতে দেয়, 'স্লো' এবং অন্যান্য jQuery.fx.speeds সমর্থন করার পাশাপাশি সম্পূর্ণ jQuery হওয়ার অনুমতি দেয়। এবং যদি আপনি এগুলি বন্ধ করেন তবে অ্যানিমেশনগুলির মতোই পরিচালনা করা হবে।
আরও ব্যবহারের সাথে jsFiddle পরীক্ষার ক্ষেত্র (যেমন .stop () দেখানো হচ্ছে, এখানে পাওয়া যাবে ।
সমাধানের মূলটি হ'ল:
$('<queue/>')
.delay(100 /*ms*/)
.queue( (next) => { $('#result').text('done.'); next(); } );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>
সম্পূর্ণ প্লাগইন হিসাবে supporting .উইট () এবং $ (..) এর সমর্থন সমর্থন করে অপেক্ষা করুন ():
// add wait as $.wait() standalone and $(elem).wait() for animation chaining
(function($) {
$.wait = function(duration, completeCallback, target) {
$target = $(target || '<queue />');
return $target.delay(duration).queue(function(next){completeCallback && completeCallback.call($target); next();});
}
$.fn.wait = function(duration, completeCallback) {
return $.wait.call(this, duration, completeCallback, this);
};
})(jQuery);
//TEST
$(function() {
// stand alone
$.wait(1000, function() {
$('#result')
.append('...done');
});
// chained
$('#result')
.append('go...')
.wait('slow', function() {
$(this).append('after slow');
})
.css({color: 'green'});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>
দ্রষ্টব্য: যেহেতু অপেক্ষা অ্যানিমেশন স্ট্যাককে যুক্ত করে, $ .css () তত্ক্ষণাত কার্যকর করা হয় - যেমনটি অনুমিত হয়: প্রত্যাশিত jQuery আচরণ।
বুঝতে পারেন যে এটি একটি পুরানো প্রশ্ন, তবে আমি এই সমস্যাটির সমাধানের জন্য একটি প্লাগইন লিখেছি যাতে কেউ হয়তো দরকারী বলে মনে করতে পারেন।
https://github.com/madbook/jquery.wait
আপনাকে এটি করতে দেয়:
$('#myElement').addClass('load').wait(2000).addClass('done');