2017-08-24 5 views
7

मुझे सेट इंटरवल के कार्यान्वयन में कोई समस्या है। मैंने एक स्लाइडर बनाया है जिसमें setInterval हर कुछ सेकंड में एक फ़ंक्शन को संसाधित करता है। मैंने कुछ मिनटों के बाद देखा है और setInterval के निष्पादन के कुछ दौर एक अतिरिक्त देरी हो रही है। कृपया सुझाव दें कि यहां समस्या क्या है?SetInterval निष्पादन के कई दौरों के बाद देरी बनाता है

$(document).ready(function() { 
    var totalItems = $('.sliderItem', '#slider').length; 
    var currentIndex = $('.itemActive').index() + 1; 
    var slideTime = 3000; 




    function goNext (e) { 
     $('.sliderItem').eq(e).fadeOut(500);  
     $('.welcomeBox > .welcomeText1', '.sliderItem').eq(e).hide(500); 
     $('h1', '.sliderItem').eq(e).hide(500); 
     $('h2', '.sliderItem').eq(e).hide(500); 
     if(e == totalItems - 1) { 
       e = 0; 
      } else { 
       e++; 
      }; 
     $('.sliderItem').eq(e).fadeIn(400); 
     $('h1', '.sliderItem').eq(e).delay(800).show(400); 
     $('h2', '.sliderItem').eq(e).delay(500).show(400); 
     $('.welcomeBox > .welcomeText1', '.sliderItem').eq(e).delay(300).show(400); 
     currentIndex = e; 
    }; 


    function loader() { 
     $('.loader').animate({"width":"100%"}, slideTime - 199); 
     $('.loader').animate({"opacity":"0"}, 199); 
     $('.loader').animate({"width":"0%"}, 0); 
     $('.loader').animate({"opacity":"1"}, 0); 
    }; 


     function autoPlay (e){ 
     timer = setInterval(function() { 
     loader(); 
     goNext(e - 1); 
     console.log(e); 
     if(e == totalItems) { 
      e = 1; 
      } else { 
      e++; 
     }; 
     currentIndex = e; 
     }, slideTime); 

     }; 

    autoPlay(currentIndex); 


}); 

https://codepen.io/Sizoom/pen/ayjNog

+0

आप "अतिरिक्त देरी" के बारे में बात करते हैं। क्या आपका मतलब है कि अचानक अचानक अंतराल विलंब होता है? या क्या आपका मतलब है कि यह समय के साथ धीरे-धीरे बढ़ता है, ताकि कुछ मिनटों के बाद यह अब "सिंक" में न हो? –

+0

मैंने आपका डेमो देखा, अगर समस्या यह है कि संकेतक बार स्लाइडर के साथ सिंक में नहीं है तो यह सामान्य है ... आपको सूचक बार के अंत में स्लाइडर को एक ईवेंट के साथ ड्राइव करना चाहिए .... – sabotero

उत्तर

4

वहाँ Animation queue साथ मुद्दा हो सकता है।

मुझे Chrome या webkit ब्राउज़र के साथ भी इसी तरह के मुद्दे का सामना करना पड़ा। JQuery के .animate() फ़ंक्शन के साथ setInterval/setTimeout का उपयोग करते समय।

दो नए टैब में Original और updated दोनों को खोलें और इसे कुछ मिनटों के लिए छोड़ दें और फिर से जांचें। आप इसे अपडेट कर दिया जाएगा कोड सुचारू रूप से एनिमेट किए जाएंगे जो stop

Working code

$('.sliderItem').eq(e).stop().fadeOut(500); 

उपयोग stop से पहले fadeIn या fadeOut

Usefull link

jQuery प्रलेखन (source) के साथ प्रयोग किया जाता है:

अनुरोध की प्रकृति की वजह से एनीमेशन फ़्रेम(), आपको कभी भी सेट 12 या 1Tकतार एनिमेशन को सेटइंटरवाल या सेटटाइमआउट लूप का उपयोग नहीं करना चाहिए। CPU संसाधनों को संरक्षित करने के लिए, अनुरोध करने वाले ब्राउज़र का उपयोग करने वाले ब्राउज़र एनीमेशन फ़्रेम विंडो/टैब प्रदर्शित नहीं होने पर एनिमेशन अपडेट नहीं होंगे। यदि आप एनीमेशन को रोकते समय setInterval या setTimeout के माध्यम से एनीमेशन कतार जारी रखते हैं, तो सभी कतारबद्ध एनिमेशन खेलना शुरू कर देंगे जब विंडो/टैब फ़ोकस प्राप्त करता है। इस संभावित समस्या से बचने के लिए, लूप में अपनी आखिरी एनीमेशन के कॉलबैक का उपयोग करें, या तत्वों को कार्य करें .queue() अगली एनीमेशन शुरू करने के लिए टाइमआउट सेट करने के लिए।

$(document).ready(function() { 
 
    var totalItems = $('.sliderItem', '#slider').length; 
 
    var currentIndex = $('.itemActive').index() + 1; 
 
    var slideTime = 3000; 
 

 
    function goNext(e) { 
 
    $('.sliderItem').eq(e).stop().fadeOut(500); 
 
    $('.welcomeBox > .welcomeText1', '.sliderItem').eq(e).stop().hide(500); 
 
    $('h1', '.sliderItem').eq(e).stop().hide(500); 
 
    $('h2', '.sliderItem').eq(e).stop().hide(500); 
 
    if (e == totalItems - 1) { 
 
     e = 0; 
 
    } else { 
 
     e++; 
 
    }; 
 
    $('.sliderItem').eq(e).stop().fadeIn(400); 
 
    $('h1', '.sliderItem').eq(e).stop().delay(800).show(400); 
 
    $('h2', '.sliderItem').eq(e).stop().delay(500).show(400); 
 
    $('.welcomeBox > .welcomeText1', '.sliderItem').eq(e).stop().delay(300).show(400); 
 
    currentIndex = e; 
 
    }; 
 

 

 
    function loader() { 
 
    $('.loader').animate({ 
 
     "width": "100%" 
 
    }, slideTime - 199); 
 
    $('.loader').animate({ 
 
     "opacity": "0" 
 
    }, 199); 
 
    $('.loader').animate({ 
 
     "width": "0%" 
 
    }, 0); 
 
    $('.loader').animate({ 
 
     "opacity": "1" 
 
    }, 0); 
 
    }; 
 

 

 
    function autoPlay(e) { 
 
    timer = setInterval(function() { 
 
     loader(); 
 
     goNext(e - 1); 
 
     if (e == totalItems) { 
 
     e = 1; 
 
     } else { 
 
     e++; 
 
     }; 
 
     currentIndex = e; 
 
    }, slideTime); 
 

 
    }; 
 
    autoPlay(currentIndex); 
 

 
});
body { 
 
    background: black; 
 
} 
 

 
#slider { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    color: #FFF; 
 
    padding: 30px; 
 
} 
 

 
#slider a { 
 
    color: #FFF; 
 
} 
 

 
.sliderItem { 
 
    position: absolute; 
 
    /* background: rgba(0, 0, 0, 0.28); */ 
 
    display: none; 
 
    width: 100%; 
 
    padding: 57px; 
 
    margin: 0; 
 
} 
 

 
.sliderItem .welcomeText1 { 
 
    display: none; 
 
} 
 

 
.sliderItem h1, 
 
.sliderItem h2, 
 
.sliderItem h3, 
 
.sliderItem>.welcomeBox>.welcomeText { 
 
    display: none; 
 
} 
 

 
.itemActive { 
 
    display: block; 
 
} 
 

 
.itemSelectors { 
 
    position: absolute; 
 
    bottom: 0; 
 
    display: block; 
 
} 
 

 
.itemSelectors>.selector { 
 
    background: #FFF; 
 
    color: #3b7cbc; 
 
    font-size: 18px; 
 
    line-height: 40px; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    margin: 0 0 0 10px; 
 
    cursor: pointer; 
 
} 
 

 
.activeSelect { 
 
    background: #3a3a3a !important; 
 
    color: #FFF !important; 
 
    pointer-events: none; 
 
} 
 

 
.ms-nav-prev { 
 
    width: 30px; 
 
    background: url(https://xhosting.co.il/libraries/themes/xhosting/js/masterslider/skins/default/light-skin-1.png); 
 
    background-position: -89px -103px; 
 
    height: 40px; 
 
    cursor: pointer; 
 
    top: 50%; 
 
    right: 30px; 
 
    left: auto; 
 
    position: absolute; 
 
    z-index: 110; 
 
} 
 

 
.ms-nav-next { 
 
    width: 30px; 
 
    background: url(https://xhosting.co.il/libraries/themes/xhosting/js/masterslider/skins/default/light-skin-1.png); 
 
    background-position: -89px -26px; 
 
    height: 40px; 
 
    cursor: pointer; 
 
    top: 50%; 
 
    left: 30px; 
 
    position: absolute; 
 
    z-index: 110; 
 
} 
 

 
.loader { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 0; 
 
    height: 10px; 
 
    background: rgba(255, 255, 255, 0.37); 
 
} 
 

 
.fadeInSlide { 
 
    animation: fadeInSlide 0.5s; 
 
} 
 

 
@-webkit-keyframes fadeInSlide { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id='slider'> 
 

 
    <div class='sliderItem itemActive'> 
 
    <div class="welcomeBox row"> 
 
     <div class="col-md-4"> 
 
     <div class=""> 
 
      <h2 class="">ברוכים הבאים ל</h2> 
 
      <h1 class=''>HOST<span>1</span></h1> 
 
     </div> 
 
     </div> 
 
     <div class="welcomeText1 col-md-8"> 
 
     <div class=''> 
 
      על מנת לספק את השירותים הללו באיכות הגבוהה ביותר אנו משתמשים בתשתיות האיכותית ביותר הן ברמת החומרה והן ברמת התוכנה. לא משנה על איזה מערכת אתה עובד אם השרת לא איכותי התוצאות בהתאם. לכן אנחנו לא מתפשרים וקונים את הרכיבים הטובים ביותר בשוק. 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 

 
    <div class='sliderItem'> 
 
    <div class="welcomeBox row"> 
 
     <div class="col-md-4"> 
 
     <div class=""> 
 
      <h2 class="">ברוכים הבאים ל</h2> 
 
      <h1 class=''>HOST<span>2</span></h1> 
 
     </div> 
 
     </div> 
 
     <div class="welcomeText1 col-md-8"> 
 
     <div class=''> 
 
      על מנת לספק את השירותים הללו באיכות הגבוהה ביותר אנו משתמשים בתשתיות האיכותית ביותר הן ברמת החומרה והן ברמת התוכנה. לא משנה על איזה מערכת אתה עובד אם השרת לא איכותי התוצאות בהתאם. לכן אנחנו לא מתפשרים וקונים את הרכיבים הטובים ביותר בשוק. 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
    <div class='sliderItem'> 
 
    <div class="welcomeBox row"> 
 
     <div class="col-md-4"> 
 
     <div class=""> 
 
      <h2 class="">ברוכים הבאים ל</h2> 
 
      <h1 class=''>HOST<span>3</span></h1> 
 
     </div> 
 
     </div> 
 
     <div class="welcomeText1 col-md-8"> 
 
     <div class=''> 
 
      על מנת לספק את השירותים הללו באיכות הגבוהה ביותר אנו משתמשים בתשתיות האיכותית ביותר הן ברמת החומרה והן ברמת התוכנה. לא משנה על איזה מערכת אתה עובד אם השרת לא איכותי התוצאות בהתאם. לכן אנחנו לא מתפשרים וקונים את הרכיבים הטובים ביותר בשוק. 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
</div> 
 

 

 

 

 

 
<div class='container'> 
 
    <div class='itemSelectors'></div> 
 
</div> 
 

 

 

 
<div class="clouds"></div> 
 
<div class='ms-nav-prev'></div> 
 
<div class='ms-nav-next'></div> 
 
<div class='loader'></div>

आप fadein या fadeOut (बल्कि अधिक सामान्य चेतन समारोह की तुलना में) आप स्पष्ट रूप से स्थापित करने के लिए दोनों .stop (की आवश्यकता होगी) मापदंडों का उपयोग करते समय कतार स्पष्ट करने की जरूरत है सच में

+0

धन्यवाद! अब समस्या तय है। – Sizoom

संबंधित मुद्दे