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