完成所有旋轉后，如何停止html圖像旋轉？

Question

我有這段代碼 ，每當用戶單擊圖像時，它都會嘗試旋轉圖像。 如果用戶單擊圖像一次，但又沒有單擊圖像，則它會按照我的意圖在一次嘗試后停止旋轉。 然后他們可以再次單擊該圖像，它將再次旋轉。

但是，如果他們單擊一次圖像，然后再次單擊它，則會加快速度，這也是正確的行為。 但是，它永遠不會停止旋轉。

    if(degree === 361){
        clearInterval($this.data('rotating'));
        $this.data('rotating', false);
        $this.data('degree', 0);
        return;
    }

此代碼應在第二次旋轉結束后停止旋轉，但它將繼續無限期旋轉。 每次點擊最后一次旋轉完成后，如何使其加速並停止旋轉？

Answer 1

這是你的問題：

單擊它時，會將setInterval返回的值分配給元素的data屬性。 這會破壞您之前存儲的所有setInterval值，因此永遠不會清除它們。 您不必存儲新的文件，而要在每次啟動新文件時都破壞它們。 您可以通過將每個新值壓入一個數組，然后彈出該數組的最后一個值並在每次需要清除時清除該值來完成此操作。

（提琴： http : //jsfiddle.net/hmN7a/8/ ）

$(function() {

    var $rota = $('.spin')
    var rotating=[];
    $rota.click(function(){
        var $this = $(this);
        //push the latest interval id onto the array
        rotating.push(setInterval(function(){
            var degree = $this.data('degree') || 0;
            if(degree === 361){
                clearInterval(rotating.pop()); //clear out the latest inerval in the array
                $this.data('rotating', false);
                $this.data('degree', 0);
                return;
            }
            $this.css({ transform: 'rotate(' + degree + 'deg)'});
            $this.data('degree', ++degree)
        }, 5));

    });

});

Answer 2

嘗試添加以下代碼以停止旋轉：

    if($this.data('rotating')) {
        $this.css({ transform: 'rotate(' + degree + 'deg)'});
        $this.data('degree', ++degree)
    }

這是一個小提琴： http : //jsfiddle.net/hmN7a/6/

希望這可以幫助。

Answer 3

使用clearInterval函數。

if(degree === 161){
    clearInterval($this.data('rotating'));
    $this.data('rotating', false);
    $this.data('degree', 0);
    return clearInterval(this);
}

http://jsfiddle.net/SkUV9/