как остановить вращение CSS / JQuery

Question

У меня есть функция, которая заставляет вращаться шестерню на странице после нажатия элемента, я нашел код в сети и немного отредактировал, чтобы сделать его совместимым с тем, что мне нужно, однако я не могу понять, как заставить его работать по таймеру (может быть, 2 секунды?). кто-нибудь может мне помочь?

$(".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/

вот так это выглядит, хотя jsfiddle не работает (может быть, я не поместил достаточно кода), но во всем фактическом файле шестерня вращается, как нужно, когда нажимается go1, но не останавливает вращение

Answer 1

var degree=0;
var timer=2000;

$(".go1").click(function() {
    rotate();
});

function rotate() {
    var $spin = $(".gear1");
    time=0;
    while(time<timer) {
        $spin.css({ 'WebkitTransform': 'rotate(' + degree + 'deg)'});  
        $spin.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 
        ++time;   
        ++degree;
    });
}

Answer 2

Разветвлено от roXon: http://jsfiddle.net/HWfMt/

Ключ в том, чтобы останавливать рекурсивные вызовы setTimeout () через 2 секунды, каждый раз, когда вы нажимаете.

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

Answer 3

Пожалуйста, ознакомьтесь с таймерами JavaScript: http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

Затем вы можете использовать метод setInterval, чтобы сделать что-то вроде этого:

var degree = 0;
$(".go1").click(function() { setInterval("rotate()", 2000); });

function rotate( )
{
    var $spin = $(".gear1"), degree = 0, timer;
    $spin.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
    $spin.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
    degree = degree + 1;
}