javascript - Javascript - クリックすると画像が無限に回転し、もう一度クリックすると停止します

Question

私は、このスクリプトで画像をクリックすると無限に回転し、もう一度クリックすると停止する方法を見つけようとしています。誰でもそれを変更してそれを行うことができますか?

$(function() {

    var $rota = $('.spin'),
        degree = 0,
        timer;

    function rotate() {    
        $rota.css({ transform: 'rotate(' + degree + 'deg)'});
        // timeout increase degrees:
        timer = setTimeout(function() {
            ++degree;
            rotate(); // loop it
        },5);
    }

    rotate();    // run it!

});

Answer 1

要素がクリックされたかどうかを判断するブール値を作成し、クリック時に変更して、クリックが発生した場合はプロセスを停止できます。

$(function() {

    var $rota = $('.spin'),
        degree = 0,
        clicked = false,
        timer;

    $rota.on('click', function() { clicked = true; return false; } );

    function rotate() { 
        if ( clicked )   
            $rota.css({ transform: 'rotate(' + degree + 'deg)'});
            // timeout increase degrees:
            timer = setTimeout(function() {
               ++degree;
               rotate(); // loop it
            },5);
        }

        rotate();    // run it!
});

Answer 2

の代わりにsetIntervalandを使用してみてください:clearIntervalsetTimeout

function rotate() {    
    $rota.css({ transform: 'rotate(' + degree + 'deg)'});
    ++degree;
}

var loop;
$rota.click(function() { 
    if(loop) {
         clearInterval(loop);
         loop = false;
    }
    else {
        loop = setInterval(rotate, 5);
    }
});

ここでsetIntervalについて読むことができます

Answer 3

$(function() {
    var $rota = $('img'), degree = 0, timer, enabled;
    var rotate = function() {
        timer = setInterval(function() {
            ++degree;
            $rota.css({
              transform: 'rotate(' + degree + 'deg)'
            });
        },5);
    };
    $rota.on('click', function(){
       enabled = !enabled;
       enabled ? rotate() : clearInterval(timer);
    });
});