Jquery：Canvas Pie Timer 插件，如何使用：如果间隔计时器当前处于活动状态，请勿再次激活？

Question

http://jsfiddle.net/nicktheandroid/NvVu7/

当饼图计时器处于活动状态并倒计时时，当你再次启动它时，它会变得混乱并开始闪烁，然后回调会被无休止地激活。

有没有办法向插件添加检查，即“如果此间隔存在/正在运行，请不要再次启动它，如果它没有运行，则启动它。”？

您可以尝试在演示中单击“加载大文件”，多次启动饼图计时器并查看其行为。

// Jquery 饼图计时器插件

(function( $ ){

    jQuery.fn.pietimer = function( options, callback ) {

        var settings = {
            'seconds': 10,
            'colour': 'rgba(255, 255, 255, 0.8)',
            'height': this.height(),
            'width': this.width()
        };

        if ( options ) { 
            $.extend( settings, options );
        }


        this.html('<canvas id="pie_timer" width="'+settings.height+'" height="'+settings.height+'"></canvas>');

        var val = 360;

        interval = setInterval(timer, 40);

        function timer(){

            var canvas = document.getElementById('pie_timer'); 

            if (canvas.getContext){

                val -= ( 360 / settings.seconds ) / 24;

                if ( val <= 0 ){

                    clearInterval(interval);
                    canvas.width = canvas.width;
                    if(typeof callback == 'function'){
                        callback.call();

                    }

                } else {

                    canvas.width = canvas.width;

                    var ctx = canvas.getContext('2d');

                    var canvas_size = [canvas.width, canvas.height];
                    var radius = Math.min(canvas_size[0], canvas_size[1]) / 2;
                    var center = [canvas_size[0]/2, canvas_size[1]/2];

                    ctx.beginPath();
                    ctx.moveTo(center[0], center[1]);
                    var start = ( 3 * Math.PI ) / 2;
                    ctx.arc(
                        center[0],
                        center[1],
                        radius,
                        start - val * ( Math.PI / 180 ),
                        start,
                        false
                    );

                    ctx.closePath();
                    ctx.fillStyle = settings.colour;
                    ctx.fill();

                }

            }

        }

        return this;

    };
})( jQuery );

Answer 1

为什么不直接添加一个 hasClicked 变量呢？这将阻止它再次激活。

http://jsfiddle.net/NvVu7/6/