Question

Good Afternoon All

我们已经能够在javascript

中使用一个时间间隔获得此基本版本

    time = 10000; // 10 Seconds
    var counter = 0;
    divs = $('#div1, #div2, #div3, #div4, #div5');
    function showDiv () {
    divs.hide() // hide all divs
        .filter(function (index) { return index == counter % 5; }) 
    // figure out correct div to show
        .fadeIn(300, "linear"); // and show it
        counter++;
        if (counter > 5 ){
            counter = 1; //Reset Counter
        }
   }; // function to loop through divs and show correct div
   showDiv(); // show first div  

   setInterval(function(){ showDiv(); }, time); // do this every 10 seconds 
   });

我想做的是导致每个div时间间隔不同

喜欢div1＆amp; div2播放10秒，其他播放5秒

我能够让逻辑工作，看看时间是否根据显示的div而改变，但无法从“时间”更新从一个值到另一个值

我一直在读，使用setInterval（）不允许在加载变量值后更改它。有一些使用setTimeout（）的建议，但我无法弄明白

有意见的人吗？

感谢〜

Answer 1

您可以使用setTimeout（）从内部再次调用该函数，而不是使用setInterval。这允许基于计数器确定每个实例的间隔

   time = 10000; // 10 Seconds
   var counter = 0;
   divs = $('#div1, #div2, #div3, #div4, #div5');

   function showDiv() {

     // hide all divs, filter current index, and fadeIn
       divs.hide().eq(counter).fadeIn(300, "linear"); 

       counter++;
       if (counter > 5) {
           counter = 1; //Reset Counter
       }

       // do it again       
       var delay = counter > 1 ? time / 2 : time
       setTimeout(showDiv, delay);



   }; // function to loop through divs and show correct div
   showDiv(); // show first div

还使用过滤器（fn）简化并替换为eq()

Answer 2

正确，setInterval的间隔一旦启动就无法更改。您需要使用setTimeout每次使间隔不同。我们的想法是在传递给setTimeout的回调中再次调用setTimeout，从而创建一系列调用。这是一种常见的模式。

// Different timeouts for each div
var times = [10000, 10000, 5000, 5000, 5000];
var counter = 0;
function showDiv() {
  // Show the div immediately
  divs.hide().eq(counter).fadeIn(300, 'linear');
  // Cycle the counter
  counter = (counter + 1) % divs.length;
  // Set the delay for the next callback
  setTimeout(showDiv, times[counter]);
}
// Start the chain of calls
showDiv();

Answer 3

衷心的感谢你和brewski ......

我最终充分利用了两者，这就是我现在正在使用的

 <script type="text/javascript">
 $(function () {
 // Different timeouts for each div
 var times = [30000, 30000, 10000, 10000, 5000];
 var counter = 0;
 divs = $('#div1, #div2, #div3, #div4, #div5');
 function showDiv() {
 // hide all divs, filter current index, and fadeIn
 divs.hide().eq(counter).fadeIn(300, "linear"); 
 // set time out duration from array of times 
 setTimeout(showDiv, times[counter]);
 // cycle the counter     
 counter = (counter + 1) % divs.length;
 }; 
 showDiv(); // show first div    
 });
 </script>

如何按顺序显示每个不同时间间隔的div

3 个答案: