对JS函数使用script_queue时的执行顺序

在我们的工作场所，我们在site.master页面中定义了一个脚本队列

 // append functions to this array that will be executed after js dependencies have loaded var script_queue = [];  

然后我们将javascript函数推送到此script_queue以执行它们。 我遇到了一个问题，比如我有两个function

  // THIS IS FUNCTION 1 script_queue.push(function() { // set the width of the thumbnail list to the sum of all the li widths var thumbsWidth = 0; $('#oneClipPlaylist li').each(func … }  script_queue.push(function() { // THIS IS FUNCTION 2 var allInputs = $('fieldset.categories input'); var categoryInputs = $('fieldset.categories input').not('#categoryAll'); var categoryAllInput = $('#categoryAll'); allInputs.click(function() { var checkbox = $(this); 

这是队列的处理方式：

  (function () { for (var i in script_queue) { script_queue[i](); } } ());  

如何确保在function2之前执行function1？ 因为我遇到了我的function2在function1之前执行并且结果不正确的问题

Answer 1

命名第二个函数并且不将其排队，然后在第一个放入队列的函数的末尾调用第二个函数。

Answer 2

很久以前我已经实现了一个类似的系统，远在远处的工作:)我们的目的是在需要这些依赖项的其他脚本之前加载依赖项。 例如，如果您以这种方式加载jQuery，那么任何其他使用jQuery的脚本显然必须在加载jQuery之后才执行。 任何自定义JS对象都是如此。

一些考虑：

您的代码将在for循环中以正确的顺序执行。 所以，如果没有发生，那么它应该是

1. 如何向队列添加function。 它们可能不会按您认为的顺序添加。 这将是一个原因;

2. 具有Ajax回调或其他异步代码的函数，例如动态加载外部JS文件。 函数可能会执行并等待结果，但在等待时，其他函数将在for循环中执行。

第一个很容易检查 – 只需在处理它们之前validation函数的顺序是否符合预期，并查看它是否按正确的顺序排列，然后检查应用程序代码以了解为什么会发生这种情况。

但最有可能的原因是＃2 – 异步调用加载JS文件和/或Ajax调用; （要查看如何/为什么它不按顺序工作的示例，请参阅答案的底部）

一种可能的解决方案：各种脚本加载管理器

相当简单，我们使用此对象将脚本添加到队列中，特别考虑Ajax。 脚本可以全部依赖于任何内容或其他脚本。 处理队列时，只会立即执行没有依赖关系的脚本。

然后，当脚本完成时，将执行任何相关脚本。 唯一特殊情况是Ajax，只需要进行微小的更改，即将context属性添加到任何jQuery.ajax()调用的settings对象，并注册全局jQuery.ajaxComplete() 。 context属性的值应设置为脚本键（即“Script0”）。

$ jsload对象：

有关如何排队和执行函数的一些用法示例：

结果是：

这实际上是一个基本的开始，当然可以改进它来处理动态脚本加载（使用加载的事件）和其他应用程序需求。 但我认为这对于此类function的框架来说是一个不错的开端。

---

没有依赖关系的基本代码示例以及它中断的一些场景：

下面是一个简单的脚本处理示例，除了超时和异步调用：//将函数附加到此数组，该函数将在js依赖项加载后执行var script_queue = [];

  // Adding basic functions to queue script_queue.push(function () { console.log(1); }); script_queue.push(function () { console.log(2); }); script_queue.push(function () { console.log(3); }); script_queue.push(function () { console.log(4); }); script_queue.push(function () { console.log(5); }); // Let's do some Ajax! script_queue.push(function () { $.ajax({ type: "GET", url: "http://otherdomain.com/somePage.html", data: "ho ho ho", dataType: "jsonp", jsonp: "jsonp", success: function (response, textS, xhr) { console.log("6 ajax finished success") }, error: function (xmlHttpRequest, textStatus, errorThrown) { console.log("6 ajax finished error") } }); console.log("6 ajax start"); }); // Let's throw in a timeout script_queue.push(function () { window.setTimeout(function () { console.log("7 with timeout") }, 1000); }); script_queue.push(function () { console.log(8); }); script_queue.push(function () { console.log(9); }); script_queue.push(function () { console.log(10); }); // Process the funcs (function () { for (var i in script_queue) { script_queue[i](); } } ());  

而且，控制台的结果：

正如您所看到的，大多数函数按顺序执行 – Ajax以正确的顺序启动 – 但是当执行回调并且超时完成时，所有其他函数都已经处理完毕。

依赖管理器是解决此问题的一种方法。

希望这会有所帮助并给你一些想法！

---