javascript - 启动并暂停间隔onclick

我试图开始准备好间隔，然后在单击时暂停它，然后从我停下的地方继续。除了“恢复”部分，我的所有工作都没有完成。我可以帮忙吗？

这是我的小提琴：FIDDLE

HTML：

<a href="questions_create.asp?interactive=off" class="start"><img src='Icons/control_stop.png'  width='16' height='16' border='0' /></a>

<span id="Stop" style="cursor:pointer;display:none;" class="pauseit tutorialLoop" value="stop"><img src='http://examsoftdemo.com/Icons/control_pause.png' width='16' height='16' border='0' /></span>

<span id="Start" style="cursor:pointer;" class="playit tutorialLoop" value="start"><img src='http://examsoftdemo.com/Icons/control_play.png' width='16' height='16' border='0' /></span>

JS：

 function fadeLoop() {  //start the interval loop
        var counter = 0,
            divs = $('.fader').css('visibility', 'visible').hide(),
            dur = 100;  // animate

        function showDiv() {  // show divs in order
            divs.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, function () {
                $(this).focus();
            }); // and show it
            counter++;
        }; // function to loop through divs and show correct div
        showDiv(); // show first div
        return setInterval(function () {
            showDiv(); // show next div
        }, 2 * 1000); // do this every 2 seconds
    };
    var interval = null,
        counter = 0;

    $(".playit").on('click', function (e) {  // play the interval loop
        // e.stopPropagation();
        if (!interval) {
            interval = fadeLoop();
            counter = counter + 1;
            $(".tutorialLoop").val(counter);
        }
    });
    $(".pauseit").on('click', function (e) {
        clearInterval(interval);
        interval = null
        //$(this).val("Start");
        //interval = undefined;
    });
    $(".playit").click();  // simulate start

最佳答案

您有两个计数器变量，一个是全局变量，一个是仅限于fadeLoop函数。全局变量仅用于：

$(".tutorialLoop").val(counter);

而fadeLoop中的那个将用于消息，并且每次单击播放按钮时将重置为0。相反，请在fadeLoop中删除一个，然后仅使用全局一个。

同样，看起来循环在当前循环之后在div上启动，因此您可能需要-= 1使其保持一致（尽管这可能不是您想要的行为）。

因此，最终代码可能类似于：

function fadeLoop() {
    var divs = $('.fader').css('visibility','visible').hide(),
        dur = 100;

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

        showDiv(); // show first div

        return setInterval(function() {
            showDiv(); // show next div
        }, 2 * 1000); // do this every 5 seconds
     };

     var interval = null,
        counter = 0;
        interval

     $(".playit").on('click' , function(e) {
        if (!interval){
            counter -= 1;
            interval = fadeLoop();

            $(".tutorialLoop").val(counter);
        }
     });

    $(".pauseit").on ('click' , function(e) {
            clearInterval(interval);
           interval = null
    });

    $(".playit").click();
});