切換啓動和停止jQuery

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

嘗試

//... 

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); 
} 

Answer 3

你可以使用一個區間，並用它返回id使用clearInterval將其取消：http://jsfiddle.net/AKgZn/32/。

/* 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; 
    } 
});