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

Question

根据这个答案我的函数调用应该工作,但它不是:在另一个js文件中调用javascript函数

我的代码(简化):
file1.js:

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

file2.js

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

head.liquid
在头部:
{{'file1.js'| asset_url | script_tag}}
{{'file2.js'| asset_url | script_tag}}

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

Answer 1

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

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

console.log(loadFYfResults);

在这种情况下,loadFYFResults将undefined不再位于loadFYfResults已定义的范围内.

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