从 <body> 调用的 <head> 函数未定义答案

【问题标题】：<head> function called from <body> is not defined从 <body> 调用的 <head> 函数未定义
【发布时间】：2023-04-06 08:47:01
【问题描述】：

在网页的<head> 中，我在文档中准备了以下功能：

<script type="text/javascript">
    jQuery(document).ready(function ($){
        function productImageCycle(){
            // Function contents...
        };
    });
</script>

函数的内容在指定元素上调用 jQuery Cycle 插件。我可以使用 productImageCycle(); 从同一个文档就绪事件中的其他任何地方成功调用它来处理 AJAX 内容。

但是 - 就在关闭 </body> 标记之前 - 我像这样调用相同的插件（以建议的方式），以便将其应用于页面加载：

<script type="text/javascript">
    jQuery(document).ready(function ($){
        // Function... (identical to contents of "productImageCycle")
    });
</script>

但这意味着我在重复代码。

我尝试通过调用<head> 中声明的函数来替换后者，但在页面加载时插件无法工作，并且浏览器控制台告诉我 productImageCycle 未定义。

我可以很容易地在<head> 中的页面加载时调用它，但我相信这是一个坏主意；是吗？如果是这样，有没有办法从<body> 中调用它？

注意：我想这与范围有关 - 我正在努力理解这个概念，但它还没有完全发挥作用。

【问题讨论】：

这不是一个坏主意。整个文档的就绪状态（不包括动态加载，如 XHR 调用）进入该 jQuery 调用。无需将该代码放在某个位置，只要它位于 jQuery-include 标记之后即可。
知道这一点让人放心，谢谢。纯粹为了知识，我怎么能从身体里调用它？
您应该在您的 jQuery 就绪状态之外（和之前）定义您的函数。所以; （include jQuery.js、define your functions、write out the ready-state function）。之后，您可以调用就绪状态内的函数。在“某些”情况下，特殊功能（带有计时器和动态加载）的行为会有些不同，并且在加载文档时可能无法在即时调用中正确加载。测试您自己的函数的最佳方法是添加console.log()“书签”（可选时间戳）并查看您的代码执行顺序。
啊哈 - 这完全有道理，感谢时间戳提示。
如果您一直遇到问题，那么您可能希望在函数中显示代码。他们可能是造成延误的罪魁祸首。

标签： jquery scope

【解决方案1】：

我建议不要在另一个函数中声明顶级函数。你为什么不把头代码转过来？这样，您还可以省略 $(document).ready 以供将来调用。

头：

function productImageCycle(){
    jQuery(document).ready(function ($){
        // Function contents...
    });
}();

（注意最后的()，直接调用函数）。

【讨论】：

也许我应该提到 - (document).ready 中还有许多其他代码行。我想他们会更好的保持在一起。不过，这是一种有趣的方法。