कैसे करें `setInterval` सिंक में अधिक व्यवहार करते हैं, या इसके बजाय` setTimeout` का उपयोग कैसे करें?

Question 1

मैं एक संगीत कार्यक्रम पर काम कर रहा हूं जिसके लिए कई जावास्क्रिप्ट तत्वों को दूसरे के साथ सिंक करने की आवश्यकता होती है। मैं उपयोग कर रहा हूं setInterval, जो शुरू में वास्तव में अच्छी तरह से काम करता है। हालांकि, समय के साथ तत्व धीरे-धीरे सिंक से बाहर हो जाते हैं जो एक संगीत कार्यक्रम में खराब है।

मैंने ऑनलाइन पढ़ा है setTimeoutजो अधिक सटीक है, और आप setTimeoutकिसी तरह लूप कर सकते हैं । हालांकि, मुझे एक सामान्य संस्करण नहीं मिला है जो बताता है कि यह कैसे संभव है।

मूल रूप से मेरे कुछ कार्य हैं जैसे:

//drums
setInterval(function {
  //code for the drums playing goes here
}, 8000);

//chords
setInterval(function {
  //code for the chords playing goes here
}, 1000);

//bass
setInterval(function {
  //code for the bass playing goes here
}, 500);

यह शुरुआत में सुपर अच्छी तरह से काम करता है, लेकिन लगभग एक मिनट के दौरान, लगता है कि जब भी मैंने पढ़ा है, तब यह सिंक से बाहर हो जाता है setInterval। मैंने पढ़ा है कि setTimeoutलगातार अधिक सटीक हो सकता है।

किसी ने मुझे setTimeoutअनिश्चित काल के लिए पाश का उपयोग करने का एक मूल उदाहरण दिखा सकता है? वैकल्पिक रूप से, यदि setIntervalकिसी अन्य फ़ंक्शन के साथ या अधिक तुल्यकालिक परिणाम प्राप्त करने का एक तरीका है , तो कृपया मुझे बताएं।

Question 2

आप setTimeoutपुनरावर्तन का उपयोग करके एक लूप बना सकते हैं :

function timeout() {
    setTimeout(function () {
        // Do Something Here
        // Then recall the parent function to
        // create a recursive loop.
        timeout();
    }, 1000);
}

के साथ समस्या यह setInterval()और setTimeout()कोई गारंटी नहीं है अपने कोड निर्दिष्ट समय में चलेंगे है कि वहाँ है। setTimeout()इसे पुनरावर्ती रूप से उपयोग और कॉल करके , आप यह सुनिश्चित कर रहे हैं कि कोडआउट का अगला पुनरावृत्ति शुरू होने से पहले टाइमआउट के अंदर के सभी पिछले ऑपरेशन पूरे हो जाएं।

Question 3

केवल पूरक के लिए। यदि आपको एक चर को पारित करने और इसे पुन: प्रसारित करने की आवश्यकता है, तो आप ऐसा कर सकते हैं:

function start(counter){
  if(counter < 10){
    setTimeout(function(){
      counter++;
      console.log(counter);
      start(counter);
    }, 1000);
  }
}
start(0);

आउटपुट:

1
2
3
...
9
10

प्रति सेकंड एक लाइन।

Question 4

यह देखते हुए कि न तो समय बहुत सटीक हो रहा है, न केवल setTimeoutथोड़ा और सटीक होने का उपयोग करने का एक तरीका यह गणना करना है कि अंतिम पुनरावृत्ति के बाद कितनी देरी हुई, और फिर अगले पुनरावृत्ति को उचित रूप में समायोजित करें। उदाहरण के लिए:

var myDelay = 1000;
var thisDelay = 1000;
var start = Date.now();

function startTimer() {    
    setTimeout(function() {
        // your code here...
        // calculate the actual number of ms since last time
        var actual = Date.now() - start;
        // subtract any extra ms from the delay for the next cycle
        thisDelay = myDelay - (actual - myDelay);
        start = Date.now();
        // start the timer again
        startTimer();
    }, thisDelay);
}

तो पहली बार यह प्रतीक्षा करेगा (कम से कम) 1000 एमएस, जब आपका कोड निष्पादित हो जाता है, तो थोड़ी देर हो सकती है, 1046 एमएस कहें, इसलिए हम अगले चक्र के लिए हमारी देरी से 46 एमएस घटाते हैं और अगला विलंब होगा केवल 954 एमएस। यह टाइमर को देर से फायरिंग से रोक नहीं पाएगा (जिसकी उम्मीद की जा रही है), लेकिन आपको देरी को रोकने से रोकने में मदद करता है। (ध्यान दें: आप यह जांचना चाहते हैं कि thisDelay < 0किस कारण से देरी आपके लक्ष्य की देरी से दोगुनी है और आप एक चक्र से चूक गए - आप पर निर्भर करता है कि आप उस मामले को कैसे संभालना चाहते हैं।

बेशक, यह संभवतः आपको कई टाइमर को सिंक में रखने में मदद नहीं करेगा, जिस स्थिति में आप यह जानना चाहते हैं कि एक ही टाइमर के साथ उन सभी को कैसे नियंत्रित किया जाए।

इसलिए आपके कोड को देखते हुए, आपके सभी विलंब 500 के कई हैं, इसलिए आप ऐसा कुछ कर सकते हैं:

var myDelay = 500;
var thisDelay = 500;
var start = Date.now();
var beatCount = 0;

function startTimer() {    
    setTimeout(function() {
        beatCount++;
        // your code here...
        //code for the bass playing goes here  

        if (count%2 === 0) {
            //code for the chords playing goes here (every 1000 ms)
        }

        if (count%16) {
            //code for the drums playing goes here (every 8000 ms)
        }

        // calculate the actual number of ms since last time
        var actual = Date.now() - start;
        // subtract any extra ms from the delay for the next cycle
        thisDelay = myDelay - (actual - myDelay);
        start = Date.now();
        // start the timer again
        startTimer();
    }, thisDelay);
}

Question 5

ऑडियो टाइमिंग से निपटने का सबसे अच्छा तरीका वेब ऑडियो एपी के साथ है, इसमें एक अलग घड़ी है जो मुख्य धागे में हो रही परवाह किए बिना सटीक है। यहाँ क्रिस विल्सन की एक महान व्याख्या, उदाहरण, आदि है:

http://www.html5rocks.com/en/tutorials/audio/scheduling/

अधिक वेब ऑडियो एपीआई के लिए इस साइट के चारों ओर एक नज़र डालें, यह ठीक उसी तरह से विकसित किया गया था जैसे आप बाद में हैं।

Question 6

उपयोग setInterval()

setInterval(function(){
 alert("Hello"); 
}, 3000);

उपरोक्त alert("Hello");प्रत्येक 3 सेकंड में निष्पादित होगा ।

Question 7

अपनी आवश्यकता के अनुसार

बस मुझे कुछ समय के लिए सेटटाइमआउट का उपयोग करने का एक मूल उदाहरण दिखाएं

हमारे पास निम्नलिखित उदाहरण हैं जो आपकी सहायता कर सकते हैं

var itr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var  interval = 1000; //one second
itr.forEach((itr, index) => {

  setTimeout(() => {
    console.log(itr)
  }, index * interval)
})

स्निपेट का विस्तार करें

Question 8

मैं काम के जीवन में इस तरह का उपयोग करता हूं: इस मामले में "आम छोरों को भूल जाओ" और "setInterval" के इस संयोजन का उपयोग करें "setTimeOut" शामिल हैं:

    function iAsk(lvl){
        var i=0;
        var intr =setInterval(function(){ // start the loop 
            i++; // increment it
            if(i>lvl){ // check if the end round reached.
                clearInterval(intr);
                return;
            }
            setTimeout(function(){
                $(".imag").prop("src",pPng); // do first bla bla bla after 50 millisecond
            },50);
            setTimeout(function(){
                 // do another bla bla bla after 100 millisecond.
                seq[i-1]=(Math.ceil(Math.random()*4)).toString();
                $("#hh").after('<br>'+i + ' : rand= '+(Math.ceil(Math.random()*4)).toString()+' > '+seq[i-1]);
                $("#d"+seq[i-1]).prop("src",pGif);
                var d =document.getElementById('aud');
                d.play();                   
            },100);
            setTimeout(function(){
                // keep adding bla bla bla till you done :)
                $("#d"+seq[i-1]).prop("src",pPng);
            },900);
        },1000); // loop waiting time must be >= 900 (biggest timeOut for inside actions)
    }

पुनश्च: समझें कि (setTimeOut) का वास्तविक व्यवहार: वे सभी एक ही समय में शुरू करेंगे "तीन ब्ला ब्ला ब्ला एक ही पल में नीचे गिनना शुरू कर देंगे" इसलिए निष्पादन की व्यवस्था करने के लिए एक अलग समयबाह्य करें।

पुनश्च 2: टाइमिंग लूप के लिए उदाहरण है, लेकिन एक प्रतिक्रिया लूप के लिए आप घटनाओं का उपयोग कर सकते हैं, async प्रतीक्षा का वादा कर सकते हैं ..

Question 9

समाधान के साथ setTimeout लूप समस्या

// it will print 5 times 5.
for(var i=0;i<5;i++){
setTimeout(()=> 
console.log(i), 
2000)
}               // 5 5 5 5 5

// improved using let
for(let i=0;i<5;i++){
setTimeout(()=> 
console.log('improved using let: '+i), 
2000)
}

// improved using closure
for(var i=0;i<5;i++){
((x)=>{
setTimeout(()=> 
console.log('improved using closure: '+x), 
2000)
})(i);
}

स्निपेट का विस्तार करें

Question 10

जैसा कि किसी और ने बताया, वेब ऑडियो एपीआई में एक बेहतर टाइमर है।

लेकिन सामान्य तौर पर, अगर ये घटनाएं लगातार होती हैं, तो आप कैसे इन सभी को एक ही टाइमर पर रख सकते हैं? मैं इस बारे में सोच रहा हूं कि एक चरण अनुक्रमक कैसे काम करता है।

व्यावहारिक रूप से, क्या यह ऐसा कुछ दिख सकता है?

var timer = 0;
var limit = 8000; // 8000 will be the point at which the loop repeats

var drumInterval = 8000;
var chordInterval = 1000;
var bassInterval = 500;

setInterval(function {
    timer += 500;

    if (timer == drumInterval) {
        // Do drum stuff
    }

    if (timer == chordInterval) {
        // Do chord stuff
    }

    if (timer == bassInterval) {
        // Do bass stuff
    }

    // Reset timer once it reaches limit
    if (timer == limit) {
        timer = 0;
    }

}, 500); // Set the timer to the smallest common denominator

Question 11


function appendTaskOnStack(task, ms, loop) {
    window.nextTaskAfter = (window.nextTaskAfter || 0) + ms;

    if (!loop) {
        setTimeout(function() {
            appendTaskOnStack(task, ms, true);
        }, window.nextTaskAfter);
    } 
    else {
        if (task) 
            task.apply(Array(arguments).slice(3,));
        window.nextTaskAfter = 0;
    }
}

for (var n=0; n < 10; n++) {
    appendTaskOnStack(function(){
        console.log(n)
    }, 100);
}

Question 12

मुझे लगता है कि फ़ंक्शन के अंत में टाइमआउट करना बेहतर है।

function main(){
    var something; 
    make=function(walkNr){
         if(walkNr===0){
           // var something for this step      
           // do something
         }
         else if(walkNr===1){
           // var something for that step 
           // do something different
         }

         // ***
         // finally
         else if(walkNr===10){
           return something;
         }
         // show progress if you like
         setTimeout(funkion(){make(walkNr)},15,walkNr++);  
   }
return make(0);
}

यह तीन कार्य आवश्यक हैं क्योंकि दूसरे फ़ंक्शन में vars को हर बार डिफ़ॉल्ट मान से अधिलेखित किया जाएगा। जब प्रोग्राम पॉइंटर सेटटाइमआउट तक पहुंचता है तो एक कदम पहले ही गणना की जाती है। फिर बस स्क्रीन को थोड़ा समय चाहिए।

Question 13

कोड में var के बजाय let का उपयोग करें:

for(let i=1;i<=5;i++){setTimeout(()=>{console.log(i)},1000);}