对于博文20行完成一个Javascript模板引擎的备受好评我感到很惊讶,并决定用此文章介绍使用我经常使用的另一个小巧实用的工具.我们知道,在浏览器中的 JavaScript 绝大部分的操作都是异步的(asynchronous),所以我们一直都需要使用回调方法,而有时不免陷入回调的泥淖而欲死欲仙。
假设我们有两个 functions ,我们顺序地在一个后面执行完后调用另一个。他们都操作同一个变量。第一个设置它的值,第二个使用它的值。
| 123456789 | var value; var A = function() { setTimeout(function() { value = 10; }, 200); } var B = function() { console.log(value); } |
那么,现在如果我们运行A();B();我们将在控制台看到输出为undefined. 之所以会这样是因为 A 函数使用了异步方式设置 value 。我们能做的就是传一个回调函数给A,并让函数A在执行完后执行回调函数。
| 1234567891011121314 | var value; var A = function(callback) { setTimeout(function() { value = 10; callback(); }, 200); }; var B = function() { console.log(value); }; A(function() { B(); }); |
这样确实有用,但想象一下加入我们需要运行5个或更多方法时将会发生什么。一直传递回调函数将会导致混乱和非常不雅观的代码。好的解决办法是写一个工具函数,接受我们的程序并控制整个过程。让我们先从最简单的开始:
| 123 | var queue = function(funcs) { // 接下来请看,董卿??? } |
接着，我们要做的是通过传递A和B来运行该函数 -queue([A, B])。我们需要取得第一个函数并执行它。
| 1234 | var queue = function(funcs) { var f = funcs.shift(); f(); } |
如果执行这段代码,您将看到一个TypeError: undefined is not a function。这是因为 A函数没收到回调参数但却试图运行它。让我们换一种调用方法。
| 1234567 | var queue = function(funcs) { var next = function() { // ... }; var f = funcs.shift(); f(next); }; |
在 A执行完后会调用 next 方法。将下一步操作放在next函数列表中是个很好的做法。我们可以将代码归拢在一起,而且我们能够传递整个数组(即便数组中有很多函数等待执行)。
| 1234567 | var queue = function(funcs) { var next = function() { var f = funcs.shift(); f(next); }; next(); }; |
到了这一步,我们基本上达到了我们的目标。即函数A 执行后,接着会调用 B,打印出变量的正确值。这里的关键是 shift 方法的使用。它删除数组的第一个元素并返回该元素。一步一步执行下去, funcs数组就会变成 empty(空的)。所以,这可能会导致另一个错误。为了证明这一观点,让我们假设我们仍然需要运行这两个功能,但我们不知道他们的顺序。在这种情况下,两个函数都应该接受回调参数(callback )并执行它。
| 12345678910 | var A = function(callback) { setTimeout(function() { value = 10; callback(); }, 200); }; var B = function(callback) { console.log(value); callback(); }; |
当然，我们会得到TypeError: undefined is not a function.要阻止这一点,我们应该检查funcs数组是否为空。
| 12345678 | var queue = function(funcs) {
|
