在另一个脚本中引用 javascript 函数答案

【问题标题】：Reference javascript function within another script在另一个脚本中引用 javascript 函数
【发布时间】：2013-11-11 18:29:21
【问题描述】：

我有一个“一天结束的大脑放屁”，无法让这段简单的代码工作。我想做的就是在我正在使用的另一个脚本中重用一个函数。

例如，在 javascript A 中我有：

function rollLink(){
    //code that does something amazing
};
rollLink();

在另一个 JS 文件（我们称之为 B）中，我试图在简单的 AJAX 调用中重用 rollLink 函数：

$.ajax({
    url: bla,
    data: bla,
    success:function(data) {
        $('#hero').append( data );
        rollLink();
    }
});

但我收到一条错误消息，提示 rollLink() 未定义。请问有人可以指出我的错误吗？

编辑：

抱歉，信息不足。我会详细说明：

脚本 A 是我的主要 JS 文件。它在我的 WP 主题的每一页上运行，并通过 functions.php 文件排队。
脚本 B 位于我正在构建的 WP 插件中。

这是输出的页脚示例：

<script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/mytheme/javascripts/script_a.js'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/myplugin/script_b.js'></script>
</body>
</html>

【问题讨论】：

信息不足。还请向我们展示您加载这两个脚本的方式。
这取决于脚本的加载顺序和代码的执行方式。
rollLink 是全球性的吗？此外，如果 Ajax 调用真的很快，则可能不是页面上的所有脚本都已加载。
我想我找到了问题所在。当我将脚本排入队列时，我忘记将插件设置在页面底部（因此位于脚本 A 下方）。
我现在遇到的问题是，当我将脚本（上面引用为 B）排入队列以出现在页面底部时，它们仍然被称为 before 我的主脚本（以上引用为 A）。嗯，我想我需要进一步阅读如何为 WP 插件排队脚本

标签： javascript jquery function wordpress

【解决方案1】：

如果页面 a 的大小远大于页面 b，则下载和执行将需要更长的时间。更糟糕的是，如果您将函数放在文件的按钮上，那么页面 b 将在页面 a 完成加载之前准备好、运行并执行。以防万一，尝试验证是否 rollLink();在调用它之前是一个函数。

    if(typeof rollLink === "function")
    {
      //true; 
    }
    else{
     //false;
    }

如果为真，则表示该函数已准备就绪，否则，它不存在（尚）。简单的解决方法是从脚本末尾调用您的 ajax 函数，确保所有必需的文件都已加载。

一个非有效的解决方案是递归调用 ajax 函数等待 rollLink 加载。

  if(typeof rollLink === "function")
        {
          //do ur work
        }
        else{
         //call again after one sec;
             setTimeout(function (){callSelfAjaxFunction();} , 1000);//every one sec

        }

因此，如果您喜欢这种方法，您可能希望在每次调用时将计数器作为参数传递，并在超出时终止，这样您就不会让服务器永远调用它的函数不可用。

if(counter < 10 ){
  setTimeout(function (){
    callSelfAjaxFunction(counter++);
     } , 1000);//every one sec
  }

【讨论】：

【解决方案2】：

也许尝试将script_b.js 包装在$(document).ready 中，如下所示：

$(document).ready(function(){
    $.ajax({
        url: bla,
        data: bla,
        success:function(data) {
            $('#hero').append( data );
            rollLink();
        }
    });
}

【讨论】：

【解决方案3】：

这可能是因为使用该函数的文件在定义该函数的文件之前加载。当我尝试加载图像文件并将其显示在画布上时，我遇到了同样的问题，原因是要使用的文件太大，需要很长时间才能加载，因此在该文件之前加载其他文件它说变量没有定义。

解决方案：

您可以做的是创建一个布尔变量 funcionReady 并将其初始化为 false 并在函数定义中将其值设置为 true 并在使用该函数之前检查变量是否为 true 如果为 true 然后执行 else 等待。

【讨论】：

【解决方案4】：

您应该在您的页面上加载这两个文件，并且您定义 rollLink 的文件必须在您的 ajax 调用之前加载。这就是基本情况。

【讨论】：