如何使用fadeLoop暂停和恢复？

Question

我有一个显示和隐藏div淡入淡出循环，我正在使用一个简短的提示与互动教程。我可以让div依次循环;不过，我想在每个提示中添加一个暂停按钮，暂停循环，并具有恢复能力。如何将该功能添加到我的脚本中？

这里是我的JS：

$(document).ready(function(){ 
fadeLoop() 
function fadeLoop() { 

    var counter = 0, 
     divs = $('.fader').css('visibility','visible').hide(), 
     dur = 100; 

    function showDiv() { 
     $("div.fader").fadeOut(dur) // hide all divs 
      .filter(function(index) { 
       return index == counter % divs.length; 
      }) // figure out correct div to show 
      .delay(dur) // delay until fadeout is finished 
      .fadeIn(dur); // and show it 
     counter++; 
    }; // function to loop through divs and show correct div 
    showDiv(); // show first div  
    return setInterval(function() { 
     showDiv(); // show next div 
    }, 4 * 1000); // do this every 4 seconds  
}; 

$(function() { 
    var interval; 

    $("#start").click(function() { 
     if (interval == undefined){ 
      interval = fadeLoop(); 
      $(this).val("Stop"); 
     } 
     else{ 
      clearInterval(interval); 
      $(this).val("Start"); 
      interval = undefined; 
     } 
    }); 
}); 
}); 

这里是我的小提琴：Updated Fiddle

Answer 1

我以一个全局变量window.i作为计数器

function fadeLoop() { 

    var divs = $('.fader').hide(), 
     dur = 200; 

    function showDiv() { 
     divs.fadeOut(dur) // hide all divs 
      .filter(function(index) { 
       return index == window.i % divs.length; 
      }) // figure out correct div to show 
      .delay(dur) // delay until fadeout is finished 
      .fadeIn(dur); // and show it 
     window.i++; 
    }; // function to loop through divs and show correct div 
    showDiv(); // show first div  
    return setInterval(function() { 
     showDiv(); // show next div 
    }, 1 * 1000); // do this every 5 seconds  
}; 

$(function() { 
    var interval; 
    window.i = 0; 

    $("#start").click(function() { 
     if (interval == undefined){ 
      interval = fadeLoop(); 
      $(this).val("Stop"); 
     } 
     else{ 
      clearInterval(interval); 
      $(this).val("Start"); 
      interval = undefined; 
     } 
    }); 
});