啟動並暫停間隔onclick

Question

我正在嘗試在准備好時開始間隔，然后在單擊時暫停它，然后從我中斷的地方繼續。 除了“恢復”部分，我的所有工作都沒有完成。 我可以幫忙嗎？

這是我的小提琴： 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

Answer 1

您有兩個計數器變量，一個是全局變量，一個是僅限於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();
});