等待函数加载完成

Question

在jQuery中，如何测试javascript函数何时完全加载？ 我想使用一个显示加载过程的gif图像，当javascript函数加载时显示它，当函数完全加载后隐藏它？

- Dofs

---

请参考类似的问题，展示一个动画gif同时运行函数：https://dev59.com/YHVC5IYBdhLWcg3wsTZi - Crescent Fresh

你的意思是“loaded”指的是“函数已经被下载”，还是更像“函数执行完成时”？ - nickf

Answer 1

$(function(){
    $("#loadingGIF").show();
    WaitForFunction();
});

function WaitForFunction()
{
    if (!$.isFunction(FUNCTION_TO_WAIT_ON_HERE)) {
       setTimeout( WaitForFunction, 100);
       return;
    }
    Function_Loaded();
}

function Function_Loaded(){
      $("#loadingGIF").hide();
}

- Chad Grant

---

这里使用循环比递归更好，因为下载脚本不应该花费太长时间，但如果出现网络错误，堆栈会溢出，性能会降低或浏览器会崩溃。 - Jim Keener

这既是一个循环又是递归。它是一个有条件的循环（不是 for 或 while），并且在调用自身，因此是递归的。仅仅因为有一个延迟，并不能使其变得不再是递归，所有的递归都有一个停止条件，否则将会产生无限循环。 - vol7ron

如果我理解正确的话，这并不是递归，因为setTimeout没有调用给定的函数，而是将其添加到事件队列中。所以基本上setTimeout立即返回，WaitForFunction也是如此。所以我们在这里可能有一个无限的事件链（类似于setInterval）。 - Fuujuhi

可能只是一个语义问题，但我认为它可以两者兼而有之。如果由于最初触发它的相同事件而再次调用它，为什么不被视为递归呢？无论是因为被添加到堆栈还是其他机制似乎都是一种实现方式。 - vol7ron

是的，我理解你的观点。但整个线程始于Jim对堆栈使用的评论，通常递归意味着堆栈使用量增加，但这里并非如此。另一个区别在于调用函数无法使用所调用函数的结果，因此某些递归模式会失败。我们可以通过传递一个状态对象来解决这个问题，每次迭代都会向该状态对象添加内容。这将导致堆的使用增加，但不会增加堆栈的使用。 - Fuujuhi

Answer 2

在定义函数后，只需调用函数即可。函数定义后的语句将仅在读取（并因此执行）前面的源文本后执行。

- David Schmitt

---

这并不是被问到的内容，你假设他没有通过$.getScript动态加载脚本。 - Chad Grant

Answer 3

我不确定你所说的“加载”是什么意思，但以下内容应该适用：

1. 当您开始加载JavaScript代码时，请显示GIF
2. 在您加载的代码中，添加一个语句以在结尾处隐藏GIF

这应该以“简单”的方式解决您的问题，而无需使用计时器等。

- Aaron Digulla