如何調用另一個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(); 
      //} 

     }, 

    }