如何在另一个JavaScript函数中调用变量或函数

Question

我正在使用这个JavaScript Spinner / loader项目http://fgnass.github.io/spin.js/

我在JSFiddle上有一些代码http://jsfiddle.net/jasondavis/9pBsr/显示我的进度，它可能看起来像我所有的功能有点过分，但我已经删除了这篇文章的所有非相关内容。 所以，如果你能帮助我，请保持所有结构的原样。

现在我的问题。 我正在使用的库有这个代码来显示微调器

var spinner = new Spinner(opts).spin(target);

文档说要杀死和隐藏微调器以在Spinner上运行stop功能但是我的代码的结构方式，我不知道如何访问它因为我不断收到错误

TypeError: Cannot call method 'stop' of undefined

我的最终结果是能够调用它并让它停止/杀死微调器......

zPanel.loader.hideLoader()

这是我的JavaScript，但所有JS和HTML都在这个JSFiddle http://jsfiddle.net/jasondavis/9pBsr/

请帮我看一下zPanel.loader.hideLoader()函数来调用zPanel.loader.buildSpinner()函数Spinner.stop()

var zPanel = {

    init: function() {
        $(document).ready(function() {
            zPanel.loader.init();
        });
    },



    loader: {

        init: function() {
            //Bind zloader to button click
            $('#button').click(function() {
                zPanel.loader.showLoader();
            });

            $('#hidebutton').click(function() {
                zPanel.loader.hideLoader();
            });
        },

        showLoader: function() {
            //Show Spinning Loader
            $('#zloader_overlay').fadeIn('fast', function() {
                $("#zloader").show();
                zPanel.loader.buildSpinner();
            });
        },

        hideLoader: function() {
            //Hide  Spinning Loader
            $('#zloader_overlay').fadeIn('fast', function() {
                $("#zloader").hide();

                // This is the function that is not working yet
                //zPanel.loader.spinner('stop');
                zPanel.loader.buildSpinner.spinner.stop();
            });
        },

        buildSpinner: function() {

            var opts = {
              lines: 9, // The number of lines to draw
              length: 11, // The length of each line
              width: 13, // The line thickness
              radius: 40, // The radius of the inner circle
              corners: 0.4, // Corner roundness (0..1)
              rotate: 0, // The rotation offset
              color: '#000', // #rgb or #rrggbb
              speed: 1, // Rounds per second
              trail: 60, // Afterglow percentage
              shadow: false, // Whether to render a shadow
              hwaccel: false, // Whether to use hardware acceleration
              className: 'spinner', // The CSS class to assign to the spinner
              zIndex: 2e9, // The z-index (defaults to 2000000000)
              top: 200, // Top position relative to parent in px
              left: 'auto' // Left position relative to parent in px
            };

            var target = document.getElementById('zloader_content');
            var spinner = new Spinner(opts).spin(target);

            // I need to call spinner.stop() some how from my function above name hideLoader()

        },

    }

};

zPanel.init();

Answer 1

使您的微调器成为zPanel的成员。

var zPanel = {

    spinner:null,

    init: function() {
        $(document).ready(function() {
            zPanel.loader.init();
        });
    },



    loader: {

        init: function() {
            //Bind zloader to button click
            $('#button').click(function() {
                zPanel.loader.showLoader();
            });

            $('#hidebutton').click(function() {
                zPanel.loader.hideLoader();
            });
        },

        showLoader: function() {
            //Show Spinning Loader
            $('#zloader_overlay').fadeIn('fast', function() {
                $("#zloader").show();
                zPanel.loader.buildSpinner();
            });
        },

        hideLoader: function() {
            //Hide  Spinning Loader
            $('#zloader_overlay').fadeIn('fast', function() {
                $("#zloader").hide();
                zPanel.spinner.stop();
            });
        },

        buildSpinner: function() {

            var opts = {
              lines: 9, // The number of lines to draw
              length: 11, // The length of each line
              width: 13, // The line thickness
              radius: 40, // The radius of the inner circle
              corners: 0.4, // Corner roundness (0..1)
              rotate: 0, // The rotation offset
              color: '#000', // #rgb or #rrggbb
              speed: 1, // Rounds per second
              trail: 60, // Afterglow percentage
              shadow: false, // Whether to render a shadow
              hwaccel: false, // Whether to use hardware acceleration
              className: 'spinner', // The CSS class to assign to the spinner
              zIndex: 2e9, // The z-index (defaults to 2000000000)
              top: 200, // Top position relative to parent in px
              left: 'auto' // Left position relative to parent in px
            };

            var target = document.getElementById('zloader_content');
            zPanel.spinner = new Spinner(opts).spin(target);

            // I need to call spinner.stop() some how from my function above name hideLoader()

        },

    }

};

zPanel.init();

Answer 2

将微调器保存到附加到zPanel的变量，然后使用该引用来停止微调器，如何：

var zPanel = {

    init: function() {
        $(document).ready(function() {
            zPanel.loader.init();
        });
    },



    loader: {

        init: function() {
            //Bind zloader to button click
            $('#button').click(function() {
                zPanel.loader.showLoader();
            });

            $('#hidebutton').click(function() {
                zPanel.loader.hideLoader();
            });
        },

        showLoader: function() {
            //Show Spinning Loader
            $('#zloader_overlay').fadeIn('fast', function() {
                $("#zloader").show();
                //showDiv();
                zPanel.spinner = zPanel.loader.buildSpinner();
            });
        },

        hideLoader: function() {
            //Hide  Spinning Loader
            $('#zloader_overlay').fadeIn('fast', function() {
                $("#zloader").hide();
                //showDiv();
                //zPanel.loader.spinner('stop');
                zPanel.spinner.stop();
            });
        },

        buildSpinner: function() {

            var opts = {
              lines: 9, // The number of lines to draw
              length: 11, // The length of each line
              width: 13, // The line thickness
              radius: 40, // The radius of the inner circle
              corners: 0.4, // Corner roundness (0..1)
              rotate: 0, // The rotation offset
              color: '#000', // #rgb or #rrggbb
              speed: 1, // Rounds per second
              trail: 60, // Afterglow percentage
              shadow: false, // Whether to render a shadow
              hwaccel: false, // Whether to use hardware acceleration
              className: 'spinner', // The CSS class to assign to the spinner
              zIndex: 2e9, // The z-index (defaults to 2000000000)
              top: 200, // Top position relative to parent in px
              left: 'auto' // Left position relative to parent in px
            };
            //var target = document.getElementById('zloader');
            var target = document.getElementById('zloader_content');
            var spinner = new Spinner(opts).spin(target);

            return spinner;
        },

    }

};

zPanel.init();

Answer 3

zPanel是一个对象。 zPanel中的函数只使用自己的变量。 为了能够调用微调器对象，只需在zPanel中创建一个微调器属性，并让所有函数使用该属性：

var zPanel = {

    spinner: null,  //Notice the property!

    init: function() {
        $(document).ready(function() {
            zPanel.loader.init();
        });
    },



    loader: {

        init: function() {
            //Bind zloader to button click
            $('#button').click(function() {
                zPanel.loader.showLoader();
            });

            $('#hidebutton').click(function() {
                zPanel.loader.hideLoader();
            });
        },

        showLoader: function() {
            //Show Spinning Loader
            $('#zloader_overlay').fadeIn('fast', function() {
                $("#zloader").show();
                //showDiv();
                zPanel.loader.buildSpinner();
            });
        },

        hideLoader: function() {
            var self = this; //Create a variable that is accesable within the fadeIn
            //Hide  Spinning Loader
            $('#zloader_overlay').fadeIn('fast', function() {
                $("#zloader").hide();
                //showDiv();
                //Below code has changed!!
                self.spinner('stop');
                zPanel.loader.buildSpinner.spinner.stop();
            });
        },

        buildSpinner: function() {

            var opts = {
              lines: 9, // The number of lines to draw
              length: 11, // The length of each line
              width: 13, // The line thickness
              radius: 40, // The radius of the inner circle
              corners: 0.4, // Corner roundness (0..1)
              rotate: 0, // The rotation offset
              color: '#000', // #rgb or #rrggbb
              speed: 1, // Rounds per second
              trail: 60, // Afterglow percentage
              shadow: false, // Whether to render a shadow
              hwaccel: false, // Whether to use hardware acceleration
              className: 'spinner', // The CSS class to assign to the spinner
              zIndex: 2e9, // The z-index (defaults to 2000000000)
              top: 200, // Top position relative to parent in px
              left: 'auto' // Left position relative to parent in px
            };
            //var target = document.getElementById('zloader');
            var target = document.getElementById('zloader_content');

            //Below line has changed!!!
            this.spinner = new Spinner(opts).spin(target);

            //if(spinStart == 'stop'){
            //    zPanel.loader.spinner.spinner.stop();
            //}

        },

    }