在一个js文件中定义的函数在另一个js文件中未定义

Question

根据这个答案，我的函数调用应该正常，但它不是：Calling a javascript function in another js file

我的代码（简化）：
file1.js：

$(document).ready(function(){
  function loadFYfResults(sizes){
      alert('hello');
  }
});

file2.js

$(document).ready(function(){
  $('.size-button').click(loadFYfResults(sizes));
});

theme.liquid
    在头部：
      {{'file1.js'| asset_url | script_tag}}
      {{'file2.js'| asset_url | script_tag}}

当调用该函数时，控制台会抛出此错误：
“未捕获的ReferenceError：未定义loadFyfResults”
我的网站是使用Shopify的液体主题平台构建的，但我不确定是否有任何关系用它。谁能发现我做错了什么？

Answer 1

这些功能超出了彼此的范围。你可以通过查看这个块看到这个：

$(document).ready(function(){
    function loadFYfResults(sizes){
        alert('hello');
    }
});

console.log(loadFYfResults);

在这种情况下，loadFYFResults将为undefined，因为它不再位于定义loadFYfResults的范围内。

为了在另一个文件中使用该函数，在loadFYfResults函数的外部作用域中必须有另一个引用，或者只是从$（document）.ready包装器中取出它，因为你知道它只会当第二个函数准备好文档时调用。

Answer 2

您的loadFYfResults函数在定义它的函数范围之外是未知的（ready(function(){）。

这将有效：

function loadFYfResults(sizes){
    alert('hello');
}

$(document).ready(loadFYfResults);

Answer 3

问题是你在document.ready函数的回调中定义了函数loadFYfResults，所以这意味着loadFYfResults只对那个document.ready回调是本地的。如果您希望全局定义它，则应在document.ready回调之外定义它。