如何调用另一个JavaScript函数

Question

我使用这个JavaScript微调/装载机项目http://fgnass.github.io/spin.js/

我有一些代码在这里http://jsfiddle.net/jasondavis/9pBsr/一个的jsfiddle显示我的进度的内部变量或函数，它可能看起来像所有矫枉过正我有的功能，但我已经剥离了这篇文章的所有不相关的东西。所以，如果你能帮助我，请保留所有结构。

现在我的问题。我使用的图书馆中有本代码来显示微调

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(); 
      //} 

     }, 

    }