javascript - 如何传递可变数量的参数以及回调函数？

Question

我正在使用一个函数来延迟加载 Sizzle选择器引擎(由 jQuery 使用):

var sizzle_loaded;

// load the Sizzle script
function load_sizzle(module_name) {

  var script;

  // load Sizzle script and set up 'onload' and 'onreadystatechange' event
  // handlers to ensure that external script is loaded before dependent
  // code is executed
  script = document.createElement('script');
  script.src = 'sizzle.min.js';
  script.onload = function() {
    sizzle_loaded = true;
    gather_content(module_name);
  };
  script.onreadystatechange = function() {
    if ((script.readyState === 'loaded' || script.readyState === 'complete') &&
        !sizzle_loaded) {
      sizzle_loaded = true;
      gather_content(module_name);
    }
  };

  // append script to the document
  document.getElementsByTagName('head')[0].appendChild(script);

}

我设置了 onload 和 onreadystatechange 事件处理程序，以及 sizzle_loaded 标志来调用另一个函数 (gather_content() ) 一旦 Sizzle 加载完毕。所有这些都是以跨浏览器方式完成此操作所必需的。

到目前为止，我的项目只需在脚本中的某一点延迟加载 Sizzle，因此我能够将 gather_content() 函数调用硬编码到 load_sizzle 中() 函数。

但是，我现在需要在脚本中的两个不同点延迟加载 Sizzle，并在加载后调用不同的函数。我的第一 react 是修改该函数以接受回调函数:

var sizzle_loaded;

// load the Sizzle script
function load_sizzle(module_name, callback) {

  var script;

  // load Sizzle script and set up 'onload' and 'onreadystatechange' event
  // handlers to ensure that external script is loaded before dependent
  // code is executed
  script = document.createElement('script');
  script.src = 'sizzle.min.js';
  script.onload = function() {
    sizzle_loaded = true;
    callback(module_name);
  };
  script.onreadystatechange = function() {
    if ((script.readyState === 'loaded' || script.readyState === 'complete') &&
        !sizzle_loaded) {
      sizzle_loaded = true;
      callback(module_name);
    }
  };

  // append script to the document
  document.getElementsByTagName('head')[0].appendChild(script);

}

然后，我可以这样调用它:

load_sizzle(module_name, gather_content);

但是，我需要使用的另一个回调函数比 gather_content() 需要更多的参数。

如何修改我的函数，以便可以指定可变数量的参数，以便与回调函数一起传递？或者，我是否以错误的方式处理这个问题？

最终，我只想加载 Sizzle，然后在加载完成后调用我需要的任何函数(使用它需要的任何参数)。

感谢您的帮助!

Answer 1

这里的总体思路是创建一个闭包或 lambda。在某种程度上，您可以将它们视为预先加载了可供调用的参数的函数。这有时也称为委托(delegate)。

load_sizzle( module_name, function()
{
  gather_content();
});

然后，对于您的其他情况

load_sizzle( module_name, function()
{
  some_other_function( param1, param2 );
});

更多阅读closures .