জাভাস্ক্রিপ্টে সময় বিলম্ব কীভাবে সেট করবেন

Question

ছবিগুলিতে স্যুইচ করার জন্য আমার কাছে আমার এই ওয়েবসাইটে জেএসের টুকরো রয়েছে তবে আপনি যখন দ্বিতীয়বার ছবিটি ক্লিক করেন তখন বিলম্ব হওয়া দরকার। বিলম্বটি 1000 মিমি হতে হবে। সুতরাং আপনি img.jpg ক্লিক করুন তারপর img_onclick.jpg প্রদর্শিত হবে। তারপরে আপনি img_onclick.jpg চিত্রটি ক্লিক করবেন তারপরে img.jpg আবার দেখানোর আগে 1000ms বিলম্ব হওয়া উচিত।

কোডটি এখানে:

jQuery(document).ready(function($) {

    $(".toggle-container").hide();
    $(".trigger").toggle(function () {
        $(this).addClass("active");
        $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img_onclick.jpg');
    }, function () {
        $(this).removeClass("active");
        $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img.jpg');
    });
    $(".trigger").click(function () {
        $(this).next(".toggle-container").slideToggle();
    });
});

Comments

setTimeout(function(){/*YourCode*/},1000);

— মার্টেলজন

সম্ভাব্য নকল জাভাস্ক্রিপ্টে বিলম্ব প্রবর্তনের কিছু উপায় আছে?

— লয়েড

সম্ভবত .stop()যদিও খুঁজছেন । এখানে একবার

— মার্ক ওয়াল্টার্স

জাভাস্ক্রিপ্টে একটি বিলম্ব রাখার

— বেনামে

Answer 1

ব্যবহার setTimeout():

var delayInMilliseconds = 1000; //1 second

setTimeout(function() {
  //your code to be executed after 1 second
}, delayInMilliseconds);

আপনি যদি এটি ছাড়াই এটি করতে চান setTimeout: এই প্রশ্নটি দেখুন ।

Comments

কীভাবে এটি সিঙ্ক্রোনাসলি করবেন? সেটটাইমআউটের ভিতরে কোড শ্রেণীর বৈশিষ্ট্যগুলি স্বীকৃতি দেয় না।

— ishandutt2007

@ ishandutta2007 নীচের আমার উত্তর দেখার -> stackoverflow.com/a/49813472/3919057

— Ninjaneer

Answer 2

setTimeout(function(){


}, 500); 

এর ভিতরে আপনার কোডটি রাখুন { }

500 = 0.5 সেকেন্ড

2200 = 2.2 সেকেন্ড

প্রভৃতি

Answer 3

ES-6 সমাধান

নীচে একটি নমুনা কোড দেওয়া হয়েছে যা aync / অপেক্ষারত ব্যবহার করে আসল বিলম্বের জন্য করে।

অনেকগুলি প্রতিবন্ধকতা রয়েছে এবং এটি কার্যকর নাও হতে পারে তবে কেবল মজাদার জন্য এখানে পোস্ট করা ..

    async function delay(delayInms) {
      return new Promise(resolve  => {
        setTimeout(() => {
          resolve(2);
        }, delayInms);
      });
    }
    async function sample() {
      console.log('a');
      console.log('waiting...')
      let delayres = await delay(3000);
      console.log('b');
    }
    sample();

Comments

delayফাংশনটি অ্যাসিঙ্ক হওয়ার জন্য এটি প্রয়োজনীয় নয় । একটি নিয়মিত ফাংশন দ্বারা প্রত্যাশিত প্রতিশ্রুতি যখন অ্যাসিঙ্ক ফাংশনটির শুরুর দিকে থাকে তখন এই দুর্দান্ত কাজটি বিলম্ব করে works

— ইন্টারভিউস

Answer 4

জাভাস্ক্রিপ্ট setTimeoutএবং setInterval( অন্যান্য ) টাইমার ফাংশন দুটি (বেশিরভাগ ব্যবহৃত) হয় ) রয়েছে

এই দুটি পদ্ধতির একই স্বাক্ষর রয়েছে। তারা কল ব্যাক ফাংশন নেয় এবং প্যারামিটার হিসাবে সময় বিলম্ব করে।

setTimeoutবিলম্বের পরে কেবল একবার কার্যকর করে যেখানে setIntervalপ্রতি বিলম্ব মিলিসেকের পরে কলব্যাক ফাংশন কল করে চলে।

এই দুটি পদ্ধতিই একটি পূর্ণসংখ্যা শনাক্তকারীকে ফেরত দেয় যা টাইমার শেষ হওয়ার আগে সেগুলি সাফ করার জন্য ব্যবহার করা যেতে পারে।

clearTimeoutএবং clearIntervalএই দুটি পদ্ধতিই উপরের ফাংশনগুলি থেকে setTimeoutএবং একটি পূর্ণসংখ্যার শনাক্তকারী গ্রহণ করেsetInterval

উদাহরণ:

setTimeout

alert("before setTimeout");

setTimeout(function(){
        alert("I am setTimeout");
   },1000); //delay is in milliseconds 

  alert("after setTimeout");

আপনি যদি উপরের কোডটি চালান তবে দেখতে পাবেন এটি সতর্কতা before setTimeoutএবং তারপরে after setTimeoutঅবশেষে এটি সতর্ক করেI am setTimeout 1 সেকেন্ড (1000 মিমি) এর পরে

উদাহরণ থেকে আপনি যা লক্ষ্য করতে পারেন তা setTimeout(...)হ'ল অ্যাসিনক্রোনাস যার অর্থ এটি পরবর্তী বিবৃতিতে যাওয়ার আগে টাইমারটি বিচ্ছুরিত হওয়ার অপেক্ষা রাখে না অর্থাৎalert("after setTimeout");

উদাহরণ:

setInterval

alert("before setInterval"); //called first

 var tid = setInterval(function(){
        //called 5 times each time after one second  
      //before getting cleared by below timeout. 
        alert("I am setInterval");
   },1000); //delay is in milliseconds 

  alert("after setInterval"); //called second

setTimeout(function(){
     clearInterval(tid); //clear above interval after 5 seconds
},5000);

আপনি যদি উপরের কোডটি চালান তবে আপনি দেখতে পাবেন যে এটি সতর্কতা অবলম্বন করে before setIntervalএবং after setIntervalশেষ পর্যন্ত এটি I am setInterval1 সেকেন্ড (1000 মিমি) এর পরে 5 বার সতর্কতা দেয় কারণ সেটটাইমআউটটি 5 সেকেন্ডের পরে টাইমার সাফ করে দেয় বা অন্য 1 সেকেন্ডে আপনি সতর্কতা পেয়ে যাবেন I am setIntervalইনফিনিটিলি।

অভ্যন্তরীণভাবে ব্রাউজারটি কীভাবে তা করে?

আমি সংক্ষেপে ব্যাখ্যা করব।

জাভাস্ক্রিপ্টে ইভেন্টের সারি সম্পর্কে আপনার জানতে হবে তা বুঝতে। ব্রাউজারে একটি ইভেন্টের সারি প্রয়োগ করা হয়েছে। যখনই কোনও ইভেন্ট জেএসে ট্রিগার হয়ে যায় তখন এই সমস্ত ইভেন্টের (যেমন ক্লিক ইত্যাদি)) এই সারিটিতে যুক্ত করা হয়। যখন আপনার ব্রাউজারে কার্যকর করার কিছুই নেই এটি সারি থেকে একটি ইভেন্ট নেয় এবং একে একে একে কার্যকর করে।

এখন, যখন আপনি কল করেন setTimeoutবা setIntervalআপনার কলব্যাক ব্রাউজারে একটি টাইমারে নিবন্ধিত হয়ে যায় এবং নির্দিষ্ট সময়সীমা শেষ হওয়ার পরে এটি ইভেন্টের কাতারে যুক্ত হয়ে যায় এবং শেষ পর্যন্ত জাভাস্ক্রিপ্ট ক্রুটি থেকে ইভেন্টটি নিয়ে এটি কার্যকর করে।

এটি এরকম হয়, কারণ জাভাস্ক্রিপ্ট ইঞ্জিনটি একক থ্রেডযুক্ত এবং তারা একবারে কেবল একটি জিনিস কার্যকর করতে পারে। সুতরাং, তারা অন্যান্য জাভাস্ক্রিপ্ট কার্যকর করতে পারে না এবং আপনার টাইমারকে ট্র্যাক করতে পারে। এই কারণেই এই টাইমারগুলি ব্রাউজারের সাথে নিবন্ধিত হয়েছে (ব্রাউজারটি একক থ্রেডযুক্ত নয়) এবং এটি টাইমারকে ট্র্যাক রাখতে এবং টাইমার শেষ হওয়ার পরে সারিতে একটি ইভেন্ট যুক্ত করতে পারে।

একই ক্ষেত্রে ঘটবে setIntervalইভেন্টটি নির্দিষ্ট ব্যবধানের পরে এটি সাফ না হওয়া বা ব্রাউজার পৃষ্ঠা রিফ্রেশ না হওয়া পর্যন্ত পুনরায় সারিতে যুক্ত করা হবে।

বিঃদ্রঃ

আপনি এই ফাংশনগুলিতে বিলম্ব প্যারামিটারটি কলব্যাকটি কার্যকর করতে সর্বনিম্ন বিলম্বের সময়। কারণ টাইমারটির মেয়াদ শেষ হওয়ার পরে ব্রাউজারটি জাভাস্ক্রিপ্ট ইঞ্জিন দ্বারা চালিত হওয়ার জন্য কাতারে ইভেন্টটি যুক্ত করে তবে কলব্যাকের সম্পাদন আপনার সারির ইভেন্টের অবস্থানের উপর নির্ভর করে এবং ইঞ্জিনটি একক থ্রেডযুক্ত হওয়ার ফলে এটি সমস্ত ইভেন্টগুলি কার্যকর করবে because এক এক করে সারিতে।

সুতরাং, আপনার অন্যান্য কোড থ্রেডটি ব্লক করে এবং কাতারে কী আছে তা প্রক্রিয়া করার জন্য সময় না দিলে বিশেষত কল হতে নির্দিষ্ট বিলম্বের সময়ের চেয়ে বেশি সময় নিতে পারে।

এবং আমি জাভাস্ক্রিপ্ট উল্লেখ হিসাবে একক থ্রেড। সুতরাং, যদি আপনি থ্রেডটি দীর্ঘ সময়ের জন্য অবরুদ্ধ করেন।

এই কোডটি পছন্দ করুন

while(true) { //infinite loop 
}

আপনার ব্যবহারকারী কোনও বার্তা পেয়ে যাবেন যা পৃষ্ঠায় সাড়া দিচ্ছে না ।

Comments

আপনি কি আমাকে বলতে পারবেন কীভাবে আমি সেটটাইমআউট () এর অ্যাসিনক্রোনাস আচরণ বন্ধ করতে পারি?

— চন্দন পূর্বিয়া

আপনি setTimeoutঅ্যাসিক্রোনাস আচরণ না চাইলে আপনি ব্যবহার করবেন না।

— নাদির লস্কর

Answer 5

সিঙ্ক কলগুলির জন্য আপনি নীচের পদ্ধতিটি ব্যবহার করতে পারেন:

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

Answer 6

আপনার যদি রিফ্রেশ দরকার হয় তবে এটি অন্য একটি সম্ভাবনাময় বিষয়:

setTimeout(function () { 
    $("#jsSegurosProductos").jsGrid("refresh"); 
}, 1000);

Answer 7

এই সমস্যাটি সমাধান করার জন্য আমি এখানে যা করছি। আমি সম্মত হলাম সময় সংক্রান্ত সমস্যার কারণে এবং কোডটি কার্যকর করতে একটি বিরতি প্রয়োজন।

var delayInMilliseconds = 1000; 
setTimeout(function() {
 //add your code here to execute
 }, delayInMilliseconds);

এই নতুন কোডটি এটি 1 সেকেন্ডের জন্য বিরতি দেবে এবং ইতিমধ্যে আপনার কোড চালাবে।

Answer 8

আমি আমার ইনপুট দেব কারণ এটি আমাকে কী করছে তা বুঝতে সহায়তা করে।

একটি স্বয়ংক্রিয় স্ক্রোলিং স্লাইড শো করতে 3 সেকেন্ড অপেক্ষা রয়েছে যা আমি নিম্নলিখিতগুলি করেছি:

var isPlaying = true;

function autoPlay(playing){
   var delayTime = 3000;
   var timeIncrement = 3000;

   if(playing){
        for(var i=0; i<6; i++){//I have 6 images
            setTimeout(nextImage, delayTime);
            delayTime += timeIncrement;
        }
        isPlaying = false;

   }else{
       alert("auto play off");
   }
}

autoPlay(isPlaying);

মনে রাখবেন যে এটির মতো সেটটাইমআউট () চালানোর সময়; এটি অলটাইম ফাংশনগুলি সম্পাদন করবে যেমন তারা নির্ধারিত সময়ে একই সময়ে নির্বাহ করা হয়েছিল যে সেটটাইমআউটে (পরের চিত্র, বিলম্বকালীন সময়); বিলম্বের সময়টি একটি স্থির 3000 মিলিসেকেন্ড।

আমি এর জন্য যে অ্যাকাউন্টটি করেছি তা হ'ল লুপ ইনক্রিমেন্টেশনের মাধ্যমে প্রতিটিের পরে অতিরিক্ত 3000 মিলি / গুলি যুক্ত করা delayTime += timeIncrement;।

যারা এখানে যত্নশীল তাদের জন্য আমার পরের চিত্রটি () দেখতে কেমন:

function nextImage(){
    if(currentImg === 1){//change to img 2
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[1].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[1];
        imgDescription.innerHTML = imgDescText[1];

        currentImg = 2;
    }
    else if(currentImg === 2){//change to img 3
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[2].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[2];
        imgDescription.innerHTML = imgDescText[2];

        currentImg = 3;
    }
    else if(currentImg === 3){//change to img 4
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[3].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[3];
        imgDescription.innerHTML = imgDescText[3];

        currentImg = 4;
    }
    else if(currentImg === 4){//change to img 5
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[4].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[4];
        imgDescription.innerHTML = imgDescText[4];

        currentImg = 5;
    }
    else if(currentImg === 5){//change to img 6
    for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[5].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[5];
        imgDescription.innerHTML = imgDescText[5];

        currentImg = 6;
    }
    else if(currentImg === 6){//change to img 1
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[0].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[0];
        imgDescription.innerHTML = imgDescText[0];

        currentImg = 1;
    }
}