jQuery plugin에서 clearInterval 사용

이전 포스트 [jQuery] 위로 롤링되는 이미지 코드에 애니메이션 정지 버튼을 추가하고 설정된 interval을 초기화해서 애니메이션이 더이상 실행되지 않도록 해야했다. 완전한 코드는 아니고 이해를 돕기 위해 아래와 같은 구조의 jQuery plugin 코드를 작성했다.

<script>
(function($) {
    var methods = {
        init: function(option)
        {
            var settings = $.extend({
                interval: 5000,
                duration: 800
            }, option);

            var intv;

            intv = setInterval(roll_animate, settings.interval);
        },
        stop: function()
        {
            clearInterval(intv);
        }
    };

    $.fn.Roll = function(option)
    {
        if (methods[option])
            return methods[option].apply(this, Array.prototype.slice.call(arguments, 1));
        else
            return methods.init.apply(this, arguments);
    }
}(jQuery));

$(function() {
    $("#element").Roll();
});
</script>

이렇게 작성하고 $(“#element”).Roll(“stop”); 와 같이 실행하면 애니메이션이 정지되지 않는다. 당연한 결과인데 intv 라는 변수가 지역변수이기 때문이다. 그래서 위의 코드를 아래처럼 수정했다.

<script>
(function($) {
    var intervals = {};

    var methods = {
        init: function(option)
        {
            var settings = $.extend({
                interval: 5000,
                duration: 800
            }, option);

            var id = this[0].id;

            intervals[id] = setInterval(roll_animate, settings.interval);
        },
        stop: function()
        {
            var id = this[0].id;
            clearInterval(intervals[id]);
        }
    };

    $.fn.Roll = function(option)
    {
        if (methods[option])
            return methods[option].apply(this, Array.prototype.slice.call(arguments, 1));
        else
            return methods.init.apply(this, arguments);
    }
}(jQuery));

$(function() {
    $("#element").Roll();
});
</script>

intervals 라는 전역 변수를 만들고 엘리먼트의 id를 이용해 interval을 저장한다. 정지할 때는 다시 id를 이용해 해당되는 interval만 clear 하는 것이다.

jQuery의 plugin 제작 방법을 보면서 만들어 보긴했는데 이해가 완벽하지 않아 코드를 제대로 작성한 것인지 조차 모르겠다. 일단 작동은 되는 듯 한데.. 알면 알수록 점점 더 어려워지는 게 jQuery인 것 같다.