Question

我对这个jquery / javascript的东西很新，但我有jsfiddle example。到目前为止，我从点击开始，但它也需要在点击停止并返回原始状态（＃pause_button1），需要切换。任何帮助，将不胜感激提前致谢：）

Answer 1

这并不是100％清楚你想要做什么，但这可能会有所帮助：

var timer;
var imageNumber = 0;

$('#pause_button1').click(function() {
    startWorking(); 
});

$('#pause_button').click(function() {
    if (timer) {
        clearTimeout(timer);
        timer = false;
        $('#pause_button').removeClass('pause_button' + imageNumber);
        imageNumber = 0;
    }      
    else {
        startWorking();
    }
});

function startWorking() {
    function changeImage(element) {
        $('#pause_button').removeClass('pause_button' + imageNumber);
        imageNumber++;

        if (imageNumber > 6) {
            imageNumber = 1;
        }
        console.log(imageNumber);
        element.addClass('pause_button' + imageNumber, 200);        
        timer = setTimeout(function() {
            changeImage(element)
        }, 200);
    }

    changeImage($('#pause_button'));
}

Answer 2

您可以使用时间间隔并使用id使用clearInterval /* need to run this when clicked - need a toggle */ function changeImage(element, imageNumber) { function do_it() { imageNumber++; if (imageNumber > 6) { imageNumber = 1; } console.log(imageNumber); element.addClass('pause_button' + imageNumber, 200); element.attr('class', 'pause_button' + imageNumber); } return setInterval(do_it, 200); // execute every 200 ms, // return interval id } var intervalid; $('div').click(function() { if(intervalid != null) { // interval running, cancel it clearInterval(intervalid); // clear the interval intervalid = null; } else { // start interval var id = changeImage($('#pause_button'), 0); intervalid = id; } });取消它来取消它。

{{1}}

Answer 3

尝试

//...

var timeoutId = setTimeout(...);
element.data('timeout', timeoutId);

//...

var elem = $('#pause_button');
if(elem.data('timeout')) {
    clearTimeout(elem.data('timeout'));
    elem.removeData('timeout');
} else {
    changeImage($('#pause_button'), 0);
}

切换启动和停止jQuery

3 个答案: