Question

I have a function that makes a gear rotate on the page after an element is clicked, i found the code online and edited a little bit to make it compatible with what i need, however i cannot figure out how to make it run on a timer (maybe 2 seconds?). can anyone give me a hand?

$(".go1").click(function() {
    var $spin = $(".gear1"), degree = 0, timer;
    rotate();
    function rotate() {

        $spin.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
        $spin.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
    timer = 2000,setTimeout(function() {
            ++degree; rotate();
        },50);

    }


});

http://jsfiddle.net/Y2tjX/

this is how it looks, the jsfiddle isnt working though (maybe i didnt put enough of the code) but in the whole of the actual file, the gear spins as desired when go1 is clicked but doesnt stop spinning

Answer 1

Forked from roXon: http://jsfiddle.net/HWfMt/

The key is to stop the recursive setTimeout() calls after 2 seconds, each time you click.

var degree = 0;
var timer=30;
var $spin = $(".gear1");
var to;

$(".go1").click(function() {
    rotate();
     setTimeout(function(){
     clearTimeout(to);
 },2000);

});

function rotate() {
    degree++;
    $spin.css({ 'WebkitTransform': 'rotate(' + degree + 'deg)'});  
    $spin.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
    to = setTimeout(function() {
        rotate();
    }, timer);
}