jQuery/जावास्क्रिप्ट: मेरा रिकर्सिव सेटटाइमआउट फ़ंक्शन तेज़ हो जाता है जब टैब निष्क्रिय हो जाता है

Question

मुझे इस jQuery स्लाइडशो प्लगइन में एक अजीब छोटी दुविधा मिली है जिसे मैं बना रहा हूं।

यह कुछ भी फैंसी नहीं है और मैंने जो कोड लिखा है, वह बहुत अच्छा काम कर रहा है, हालांकि मैंने देखा है कि जब मैं साइट को चालू करता हूं और एक नए टैब पर स्विच करता हूं और इस अन्य टैब में वेब ब्राउज़ करना जारी रखता हूं (मैक के लिए क्रोम मेरा मामला) कि जब मैं अपनी साइट पर वापस आ जाता हूं, setTimeout कॉल तेज हो रहा है और टाइमर को घटना को खत्म करने के लिए इंतजार करने की बजाय, यह लगातार आग लगती है।

var timer; 
var counter; 
var slides; // collection of all targeted slides. 

// animate to the next slide 
function nextSlide() { 

    // stop timer 
    methods.stopTimer(); 

    // increase counter 
    counter++; 
    if (counter > slides.length-1) { counter = 0; } // if counter is greater than the amount of slides, back to the start. 

    // inner = container to be animated 
    // in the complete callback restart the timer. 
    inner.animate({ 
     'left': '-'+slides.eq(counter).position().left 
    }, { 
     duration : settings.animationSpeed, 
     easing : 'easeInOutExpo', 
     complete : startTimer() 
    }); 


} 
// timer functions. 
function startTimer() { 
    if (timer === '') { 
     timer = setTimeout(function() { 
      nextSlide(); 
     } , 3000); 
    } 
} 
function stopTimer() { 
    clearTimeout(timer); 
    timer = ''; 
} 

तो क्या होना चाहिए है कि एनीमेशन के अंत में, टाइमर एक और setTimeout कॉल के साथ reattached हो जाता है इतना है कि यह एक सतत स्लाइड शो हो जाता है (:

यहाँ मेरी (सरलीकृत) कोड है और इस जब तक आप टैब छोड़ बस ठीक काम करता है।

एक बार जब आप टैब छोड़ दो और पल स्लाइड शो ऐसा लगता है कि 3000 ms टाइमर तुरन्त आह्वान करने के लिए कम हो गया है और अब के साथ टैब पर वापस लौटें एनीमेशन खत्म अगले एक शुरू होता है बिना डी के साथ सब पर elay।

किसी भी विचार पर यह क्यों हो रहा है कि इसे कैसे हल किया जा सकता है, इसकी सराहना की जाएगी।

पढ़ने के लिए धन्यवाद,

Jannis

Answer 1

कुछ ब्राउज़र (जैसे Chrome) काफी आवर्ती टाइमर जब टैब निष्क्रिय हो जाए धीमा और फिर, जब टैब को फिर से सक्रिय आता है, वे "पकड़ने" करने की कोशिश ताकि वास्तविक टाइमर घटनाओं की संख्या समान हो। जब मैं टैब निष्क्रिय हो जाता हूं और सक्रिय होने पर इसे फिर से शुरू करता हूं, तो मैं पूरी तरह से स्लाइड शो को रोकने के लिए एक काम-आसपास के रूप में सोच सकता हूं।

Answer 2

टाइमआउट के बजाय आपने अंतराल की कोशिश की है? यह पुनरावर्ती होने के लिए इसके अलावा के लिए, बस अपने आप ही कॉलबैक के रूप में nextSlide() फ़ंक्शन को कॉल करें:

var counter = 1; 

// animate to the next slide 
function nextSlide() { 

    // increase counter 
    counter++; 

    // if counter is greater than the amount of slides, back to the start. 
    counter = (counter > slides.length-1) ? 0 : counter; 

    // inner = container to be animated 
    // in the complete callback restart the timer. 
    inner.animate(
    { 
     'left': '-' + slides.eq(counter).position().left 
    }, 
    { 
     duration : settings.animationSpeed, 
     easing : 'easeInOutExpo', 
     complete : nextSlide() 
    }); 

} 

तो यह शुरू करने और एक अंतराल को रोकने का मामला है:

var slideshow; 
function startSlideshow() 
{ 
    slideshow = setInterval(nextSlide(),3000); 
} 

function stopSlideshow() 
{ 
    clearInterval(slideshow); 
    inner.stop(); 
}