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

根据这个答案，我的函数调用应该可以工作，但不是:Calling a javascript function in another js file

我的代码(简化):
文件1.js:

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

文件2.js

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

主题.液体
在头部:
{{ 'file1.js' | Assets 网址 |脚本标签 }}
{{'file2.js' | Assets 网址 |脚本标签 }}

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

最佳答案

这些功能超出了彼此的范围。您可以通过查看此块来看到这一点:

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

console.log(loadFYfResults);

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

要在另一个文件中使用该函数，外部作用域中必须有另一个对 loadFYfResults 函数的引用，或者只是将其从 $(document).ready 包装器中取出，因为您知道它只会在以下情况下被调用文档已由第二个函数准备就绪。