जावास्क्रिप्ट में समय देरी कैसे सेट करें

Question

मेरे पास छवियों को स्विच करने के लिए मेरी वेबसाइट में js का एक टुकड़ा है लेकिन जब आप दूसरी बार छवि पर क्लिक करते हैं तो देरी की आवश्यकता होती है। देरी 1000ms होनी चाहिए। तो आप img.jpg पर क्लिक करेंगे फिर img_onclick.jpg दिखाई देगा। फिर आप img_onclick.jpg छवि पर क्लिक करेंगे, फिर img.jpg को दोबारा दिखाए जाने से पहले 1000 मी की देरी होनी चाहिए।

यहाँ कोड है:

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()। यहाँ एक नज़र है api.jquery.com/stop

— Mark Walters

जावास्क्रिप्ट में डाल की देरी

— बेनामी

Answer 1

उपयोग करें setTimeout():

var delayInMilliseconds = 1000; //1 second

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

यदि आप इसे बिना करना चाहते हैं setTimeout: इस प्रश्न का संदर्भ लें ।

Comments

यह कैसे करना है? सेटटाइमआउट के अंदर कोड वर्ग गुणों को नहीं पहचानता है।

— ishandutta2007

@ ishandutta2007 नीचे मेरा उत्तर देखें -> stackoverflow.com/a/49813472/3919057

— Ninjaneer

Answer 2

setTimeout(function(){


}, 500); 

के अंदर अपना कोड रखें { }

500 = 0.5 सेकंड

2200 = 2.2 सेकंड

आदि।

Answer 3

ईएस -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फंक्शन async हो। यह भयानक देरी काम करता है जब एक नियमित फ़ंक्शन द्वारा लौटाया गया वादा एक async फ़ंक्शन के शरीर में प्रतीक्षित होता है।

— इंटरव्यू

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 setTimeout1sec (1000ms) के बाद अलर्ट करता है

उदाहरण से आप जो नोटिस कर सकते हैं वह यह है कि 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और फिर 1sec (1000ms) के बाद 5 बार after setIntervalअलर्ट करता है, I am setIntervalक्योंकि सेटटाइमआउट 5 सेकंड के बाद टाइमर को साफ़ करता है या फिर हर 1 सेकंड में आपको I am setIntervalInfinitely अलर्ट मिलेगा ।

ब्राउज़र आंतरिक रूप से कैसे करता है?

मैं संक्षेप में समझाऊंगा।

यह समझने के लिए कि आपको जावास्क्रिप्ट में ईवेंट कतार के बारे में जानना है। ब्राउज़र में एक ईवेंट कतार लागू की गई है। जब भी किसी घटना को js में ट्रिगर किया जाता है, तो इन सभी घटनाओं (जैसे क्लिक आदि ..) को इस कतार में जोड़ दिया जाता है। जब आपके ब्राउज़र को निष्पादित करने के लिए कुछ भी नहीं है, तो यह कतार से एक घटना लेता है और उन्हें एक-एक करके निष्पादित करता है।

अब, जब आप कॉल करते हैं setTimeoutया setIntervalआपका कॉलबैक ब्राउज़र में एक टाइमर के लिए पंजीकृत हो जाता है और यह दिए गए समय समाप्त होने के बाद घटना कतार में जुड़ जाता है और अंततः जावास्क्रिप्ट कतार से घटना लेता है और इसे निष्पादित करता है।

ऐसा इसलिए होता है, क्योंकि जावास्क्रिप्ट इंजन सिंगल थ्रेडेड होते हैं और वे एक बार में केवल एक ही चीज को निष्पादित कर सकते हैं। इसलिए, वे अन्य जावास्क्रिप्ट को निष्पादित नहीं कर सकते हैं और आपके टाइमर का ट्रैक रख सकते हैं। यही कारण है कि ये टाइमर ब्राउज़र के साथ पंजीकृत हैं (ब्राउज़र एकल थ्रेडेड नहीं हैं) और यह टाइमर का ट्रैक रख सकता है और टाइमर समाप्त होने के बाद कतार में एक घटना जोड़ सकता है।

setIntervalकेवल इस मामले में ऐसा होता है कि घटना को कतार में बार-बार जोड़ा जाता है और निर्दिष्ट अंतराल के बाद जब तक कि यह साफ़ नहीं हो जाता है या ब्राउज़र ताज़ा नहीं हो जाता है।

ध्यान दें

इन कार्यों के लिए आप जो विलंब पैरामीटर पास करते हैं, वह कॉलबैक निष्पादित करने के लिए न्यूनतम विलंब समय है। ऐसा इसलिए है क्योंकि टाइमर के समाप्त होने के बाद ब्राउज़र जावास्क्रिप्ट इंजन द्वारा निष्पादित की जाने वाली कतार में ईवेंट जोड़ता है, लेकिन कॉलबैक का निष्पादन कतार में आपकी घटनाओं की स्थिति पर निर्भर करता है और जैसे ही इंजन सिंगल थ्रेडेड होता है, यह सभी घटनाओं को निष्पादित करेगा एक के बाद एक कतार।

इसलिए, आपका कॉलबैक निर्दिष्ट समय से अधिक समय ले सकता है जिसे विशेष रूप से कहा जाता है, जब आपका अन्य कोड थ्रेड को ब्लॉक करता है और कतार में क्या है, इसे प्रोसेस करने का समय नहीं देता है।

और जैसा कि मैंने बताया कि जावास्क्रिप्ट एकल धागा है। इसलिए, यदि आप लंबे समय तक थ्रेड को ब्लॉक करते हैं।

इस कोड की तरह

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;
    }
}