如何将外部环形进度条JS函数转为内部函数并解决未定义错误？

The "function is not defined" error you're seeing happens because you're trying to call the progressCircle() method before the plugin code that defines it has run. To fix this, you just need to reorder your code so the plugin's definition comes first, then your initialization and click handler code. Here's how to properly integrate everything:

Step 1: Ensure jQuery is Loaded First #

Make sure you include jQuery before any of your custom JS code. Add this in your <head> or right before the closing </body> tag:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Step 2: Combine the Plugin and Your Code in the Right Order #

Put the full plugin code first, then your initialization/click handler code—all wrapped in a jQuery closure to avoid conflicts. Here's the complete integrated code:

<script>
// First: The full progress circle plugin definition
(function( $ ){
    var ProgressCircle = function( element, options ){
        var settings = $.extend( {}, $.fn.progressCircle.defaults, options );
        var thicknessConstant = 0.02;
        var nRadian = 0;

        computePercent();
        setThickness();

        var border = ( settings.thickness * thicknessConstant ) + 'em';
        var offset = ( 1 - thicknessConstant * settings.thickness * 2 ) + 'em';

        var circle = $( element );
        var progCirc = circle.find( '.prog-circle' );
        var circleDiv = progCirc.find( '.bar' );
        var circleSpan = progCirc.children( '.percenttext' );
        var circleFill = progCirc.find( '.fill' );
        var circleSlice = progCirc.find( '.slice' );

        if ( settings.nPercent == 0 ) {
            circleSlice.hide();
        } else {
            resetCircle();
            transformCircle( nRadians, circleDiv );
        }

        setBorderThickness();
        updatePercentage();
        setCircleSize();

        function computePercent () {
            settings.nPercent > 100 || settings.nPercent < 0 ? settings.nPercent = 0 : settings.nPercent;
            nRadians = ( 360 * settings.nPercent ) / 100;
        }

        function setThickness () {
            if ( settings.thickness > 10 ) {
                settings.thickness = 10;
            } else if ( settings.thickness < 1 ) {
                settings.thickness = 1;
            } else {
                settings.thickness = Math.round( settings.thickness );
            }
        }

        function setCircleSize ( ) {
            progCirc.css( 'font-size', settings.circleSize + 'px' );
        }

        function transformCircle ( nRadians, cDiv ) {
            var rotate = "rotate(" + nRadians + "deg)";
            cDiv.css({
                "-webkit-transform" : rotate,
                "-moz-transform" : rotate,
                "-ms-transform" : rotate,
                "-o-transform" : rotate,
                "transform" : rotate
            });

            if( nRadians > 180 ) {
                transformCircle( 180, circleFill );
                circleSlice.addClass( 'clipauto' );
            }
        }

        function setBorderThickness () {
            progCirc.find('.slice > div').css({
                'border-width' : border,
                'width' : offset,
                'height' : offset
            })
            progCirc.find('.after').css({
                'top' : border,
                'left' : border,
                'width' : offset,
                'height' : offset
            })
        }

        function resetCircle () {
            circleSlice.show();
            circleSpan.text( '' );
            circleSlice.removeClass( 'clipauto' )
            transformCircle( 20, circleDiv );
            transformCircle( 20, circleFill );
            return this;
        }

        function updatePercentage () {
            settings.showPercentText && circleSpan.text( settings.nPercent + '%' );
        }
    };

    $.fn.progressCircle = function( options ) {
        return this.each( function( key, value ){
            var element = $( this );
            if ( element.data( 'progressCircle' ) ) {
                var progressCircle = new ProgressCircle( this, options );
                return element.data( 'progressCircle' );
            }

            $( this ).append('<div class="prog-circle">' +
                ' <div class="percenttext"> </div>' +
                ' <div class="slice">' +
                ' <div class="bar"> </div>' +
                ' <div class="fill"> </div>' +
                ' </div>' +
                ' <div class="after"> </div>' +
            '</div>');

            var progressCircle = new ProgressCircle( this, options );
            element.data( 'progressCircle', progressCircle );
        });
    };

    $.fn.progressCircle.defaults = {
        nPercent : 50,
        showPercentText : true,
        circleSize : 100,
        thickness : 3
    };
})( jQuery );

// Second: Your initialization and click handler code
(function( $ ){
    $( '#circle' ).progressCircle();

    $( '#submit' ).click( function() {
        $( '#circle' ).progressCircle({
            nPercent : 100,
            showPercentText : true,
            thickness : 4,
            circleSize : 50
        });
    });
})( jQuery );
</script>

Key Notes to Avoid Errors: #

• Order Matters: The plugin code must run first so jQuery knows about the progressCircle() method when you try to call it.
• Closure Safety: Wrapping everything in (function($){...})(jQuery) ensures that $ refers to jQuery, even if other libraries use the same variable name.
• DOM Readiness: If your script runs before the #circle and #submit elements exist, wrap your initialization code in $(document).ready() like this:

  $(document).ready(function() {
      $( '#circle' ).progressCircle();
      // ... rest of your code
  });
  

内容的提问来源于stack exchange，提问作者Developer