jQuery toggle image rotation

Question

I need to run the code sample below so that it works on a toggle, so when the div is clicked it starts the image rotation and when it is clicked again it starts and so on? Thanks in advance :)

 $('#pause_button1').click(function() {

    /* need to run this when clicked - need a toggle */ 

        function changeImage(element, imageNumber){
            imageNumber++;

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

            element.attr('class', 'pause_button' + imageNumber);
            setTimeout(function(){changeImage(element, imageNumber)}, 200);  
        }

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

example: jsfiddle

if you look at this example: jsfiddle.net/AKgZn/2 it needs to cycle when the white square (#pause_button1) is clicked and when its cycling and you click the cycling square again it returns to the white square

Answer 1

Try this:

html:

<div id="pause_button" class="pause_button1">

javascript:

$('#pause_button').click(function() {

    //Initially sets global variable is_toggled to true, then
    //toggles it back and forward to true and false
    window.is_toggled = !window.is_toggled;
    if (window.is_toggled) { 
      function changeImage(element, imageNumber){

          imageNumber++;

          if(imageNumber > 6){
            imageNumber = 1;
          }
          console.log(imageNumber);
          element.attr('class','pause_button' + imageNumber);
          window.timeOutId = setTimeout(function(){changeImage(element, imageNumber)}, 200); 
      }
      changeImage($('#pause_button'), 0);    
  } else {
       clearTimeout(window.timeOutId);
       $('#pause_button').attr('class','pause_button' + 1);
  }  
});

The key is the global variable window.is_toggled, although you can use any name: window.my_variable, or whatever. You don't need to initially declare it with "var" as, fortunately, !undefined = true.

Hope that helps? Good luck!

Answer 2

You can put a toggle flag in a closure that surrounds your code which has the advantage of not introducing global variables.

(function() {
    var toggled = true; // toggle flag in a closure

    var changeImage = function(element, imageNumber) {
        imageNumber++;

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

        element.attr('class', 'pause_button' + imageNumber);
        setTimeout(function(){changeImage(element, imageNumber)}, 200);  
    };

    $('#pause_button1').click(function() {
        if (toggle) {
            changeImage($('#pause_button'), 0);
        } else {
            // do what should happen if not toggled
        }
        toggle = !toggle; // flip the toggle
    });
})(this);