Toggle start and stop jQuery

Question

저는이 jquery/javascript에 매우 익숙하지만이 부분은 jsfiddle example입니다. 지금까지 나는 그것을 클릭에서 시작하지만 클릭으로 멈추고 원래 상태 (# pause_button1)로 되돌아가 토글해야합니다. http://jsfiddle.net/AKgZn/32/을 : 어떤 도움

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

당신은 간격을 사용하고 clearInterval을 사용하여 취소가 반환 id를 사용할 수

//... 

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

을 시도 사전 :)에 감사를 감상 할 수있다.

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