কীভাবে jQuery সহ 5 সেকেন্ড অপেক্ষা করবেন?


404

পৃষ্ঠাটি লোড হওয়ার পরে আমি একটি প্রভাব তৈরি করার চেষ্টা করছি এবং 5 সেকেন্ড পরে, পর্দার সাফল্যের বার্তাটি বিবর্ণ হয়ে যায় বা স্লাইড হয়ে যায়।

আমি কীভাবে এটি অর্জন করতে পারি?

উত্তর:


732

জাভাস্ক্রিপ্ট সেটটাইমআউট অন্তর্নির্মিত ।

setTimeout(
  function() 
  {
    //do something special
  }, 5000);

আপডেট : আপনি পৃষ্ঠাটি লোড করা শেষ হওয়ার পরে অপেক্ষা করতে চান, সুতরাং সেই কোডটি আপনার $(document).ready(...);স্ক্রিপ্টের ভিতরে রাখুন ।

আপডেট 2 : jquery 1.4.0 .delayপদ্ধতিটি চালু করেছে । এটি পরীক্ষা করে দেখুন । মনে রাখবেন যে .ডিলে কেবল jQuery ইফেক্টের সারিগুলির সাথে কাজ করে।


2
jQuery এ এমন কিছু আছে যা আপনি সেটটাইমআউট ব্যবহারের পরিবর্তে ব্যবহার করতে পারেন?
অ্যান্ড্রু 22

37
jQuery জাভাস্ক্রিপ্ট লিখিত হয়। আপনি jQuery অন্তর্ভুক্ত এবং ব্যবহার করে, আপনার জাভাস্ক্রিপ্ট প্রয়োজন। আপনার যদি জাভাস্ক্রিপ্ট থাকে তবে আপনার আছে setTimeout
অ্যালেক্স বাগনোলিনি 22

4
হ্যাঁ আমি জানি. মানে আমি $ ('। বার্তা')। অপেক্ষা (5000) .স্লাইডআপ (); অনেক ভাল হবে। তবে আমি মনে করি না একটি অপেক্ষা () ফাংশন বিদ্যমান।
অ্যান্ড্রু

18
.ডলে (5000) শিলা
demcodemonkey

66
কেবলমাত্র একটি সিডনোট - .ডিলে কেবল jQuery এফেক্টস সারিগুলির সাথে কাজ করে, সুতরাং এটি স্লাইড এবং ম্লানগুলির জন্য উপযুক্ত। আপনি jQuery এর সাথে করতে পারেন এমন অন্যান্য জিনিসের জন্য এটি কাজ করে না তা বুঝতে আমার কিছুটা সময় লেগেছে।
জোয়েল বেকহ্যাম

61

একটি সাধারণ জাভাস্ক্রিপ্ট টাইমার ব্যবহার করুন:

$(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);

44

আমি এই প্রশ্নটি জুড়ে ছুটে এসেছি এবং আমি ভেবেছিলাম যে আমি এই বিষয়ে একটি আপডেট সরবরাহ করব। 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();

1
আয়ান ক্লার্ক - এটি দুর্দান্ত চমত্কার সমাধান! আমি এটি খুব পছন্দ করি এবং এটি আমার প্রকল্পগুলিতে ব্যবহার করব। ধন্যবাদ!
আন্তন ডানিলচেনকো

এই সংক্ষিপ্ত কোডের কোড কেন কাজ করে না তা জানেন না
এমআর_এএমডিএভি

26
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

প্রভৃতি


7
এটি কীভাবে গৃহীত উত্তরের চেয়ে আলাদা ?
টুনাকি

2
ফর্ম্যাটিং / সিনট্যাক্স এবং এটি সময় সম্পর্কে আরও বৃহত্তর ব্যাখ্যা দেয়।
ম্যাডিউলস

17

ক্লিক করে তাৎক্ষণিকভাবে বন্ধ হয়ে যেতে পারে বা এটি 10 ​​সেকেন্ডের পরে একটি অটোক্লোজ করে এমন বার্তা ওভারলেয়ের জন্য এটি ব্যবহার করে চলেছে।

button = $('.status-button a', whatever);
if(button.hasClass('close')) {
  button.delay(10000).queue(function() {
    $(this).click().dequeue();
  });
}

1
+১০, এটি সঠিক উত্তর হওয়া উচিত, .delay()এবং এটি
বাসাতে


6

জোয়ের উত্তরের ভিত্তিতে, আমি একটি উদ্দেশ্য নিয়ে এসেছি (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 আচরণ।



1

বুঝতে পারেন যে এটি একটি পুরানো প্রশ্ন, তবে আমি এই সমস্যাটির সমাধানের জন্য একটি প্লাগইন লিখেছি যাতে কেউ হয়তো দরকারী বলে মনে করতে পারেন।

https://github.com/madbook/jquery.wait

আপনাকে এটি করতে দেয়:

$('#myElement').addClass('load').wait(2000).addClass('done');
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.