如何调用动态加载的javascript函数

时间:2009-07-27 03:46:49

标签: javascript jquery scope closures

我正在实现一个基于jquery的getscript的按需脚本控制器,它看起来像这样:

function controller = function(){

   var script = function(){
      var scripts = {};
      return {
        load: function(jsurl){
          $.getScript(jsurl, null);
        },
        run: function(js){
          window[js].apply(this,null);
        }
      }
   };

  return {
    script: script()
  };

}

var ctlr = controller();

然后这是一个带有要加载的函数的远程脚本 - remote.js

function remotefunc(){
  alert( 'remotefunc invoked' );
}

这是整个事情应该如何工作,在主脚本中:

ctlr.script.load( 'remote.js' ); // remote script successfully loaded
ctlr.script.run( 'remotefunc' ); // got an error, window['remotefunc'] undefined

但正如您所看到的,'remotefunc'是在全局“窗口”范围内定义的,因此窗口对象应该能够“看到”它。

我认为这个问题可能是'控制器'定义中的关闭内容,所以我没有使用'controller'直接$ .getScirpt:

$.getScript( 'http://path/to/remote.js', function(){
  window['remotefunc'].apply( this, null );  // this worked
} );

奇怪。所以它是关于'控制器'的实现(我很需要它)!有人可以帮我解决这个问题吗?如何修复'控制器'实现所以

 window[js].apply(this,null);

实际上可以工作吗?

感谢名单。

3 个答案:

答案 0 :(得分:2)

它告诉你window ['remotefunc']未定义的原因是因为在尝试调用其中定义的函数之前,你没有给它时间实际下载和执行远程脚本。

远程脚本是异步加载的,这意味着在等待响应时不会暂停脚本执行。

您需要重新实现getScript方法以使其同步,或者以某种方式使您的类围绕该函数在任何确定的时间内都不可用的事实。

编辑:刚刚找到了另一种可能的解决方案,请在请求之前尝试调用此方法

$.ajaxSetup({async: false});

这将使getScript方法同步

答案 1 :(得分:1)

使用getSript之类的内容时,重要的是要记住它正在提取异步。这意味着,浏览器会触发请求,当发生这种情况时,该行之后的代码会立即执行。

jQuery提供了一个回调函数参数来获取脚本,允许您在异步提取完成后执行某些操作。

试试这个:

 var script = function(){
      var scripts = {};
      return {
           load: function(jsurl, callback){
                $.getScript(jsurl, callback);
           },
           run: function(js){
                window[js].apply(this,null);
           }
     }
 };

然后,使用它时:

 ctlr.load( 'remote.js', function(){
      // remote script successfully loaded
      ctlr.run( 'remotefunc' ); 
 }); 

答案 2 :(得分:0)

这可能是时间问题吗?

在您的工作示例中,您将在回调函数中调用该函数,jQuery在加载脚本之前不会调用该函数。在您的非工作示例中,您在异步加载脚本的getScript之后立即调用该函数。