完成所有旋转后，如何停止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/