一个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}}

调用该函数时，控制台抛出此错误：
"Uncaught ReferenceError: loadFyfResults is not defined"
My site is built using Shopify's liquid theme platform 但我不确定是否与它有任何关系.谁能发现我做错了什么？

Answer 1

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

这会起作用：

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

$(document).ready(loadFYfResults);

Answer 2

问题是您在 document.ready 函数的回调中定义函数 loadFYfResults，因此这意味着 loadFYfResults 仅对 document.ready 回调是本地的。如果您希望它被全局定义，您应该在 document.ready 回调之外定义它。

Answer 3

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

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

console.log(loadFYfResults);

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

为了在另一个文件中使用该函数，必须在外部作用域中对您的 loadFYfResults 函数进行另一个引用，或者将其从 $(document).ready 包装器中取出，因为您知道它仅当第二个函数准备好文档时才会调用。

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

function defined in one js file is undefined in another js file

javascript

jquery

shopify