短小强悍的JavaScript异步调用库
我们知道,在浏览器中的 JavaScript 绝大部分的操作都是异步的(asynchronous),所以我们一直都需要使用回调方法,而有时不免陷入回调的泥淖而欲死欲仙。
假设我们有两个 functions ,我们顺序地在一个后面执行完后调用另一个。他们都操作同一个变量。第一个设置它的值,第二个使用它的值。
好的解决办法是写一个工具函数,接受我们的程序并控制整个过程。让我们先从最简单的开始:
要阻止这一点,我们应该检查funcs数组是否为空。
让我们试着想象尽可能多的情况。比如当前执行功能的 scope 。函数内的 this 关键字可能指向了全球的 window 对象。,如果我们可以设置自己的scope 当然是件很酷的事情。
我们需要的最后一个特性,就是是函数间传递参数的能力。当然我们不知道具体会有多少参数将被使用。这就是为什么我们需要使用 arguments 变量的原因。你可能知道,该变量在每个 JavaScript函数中都是可用的,代表了传进来的参数。它就和一个数组差不多,但不完全是。因为在 apply 方法中我们需要使用真正的数组,使用一个小窍门来进行转换。
你可以 点击这里查看并调试相关代码,完整的测试代码如下:
原文出处: krasimirtsonev
假设我们有两个 functions ,我们顺序地在一个后面执行完后调用另一个。他们都操作同一个变量。第一个设置它的值,第二个使用它的值。
- var value;
- var A = function() {
- setTimeout(function() {
- value = 10;
- }, 200);
- }
- var B = function() {
- console.log(value);
- }
- var value;
- var A = function(callback) {
- setTimeout(function() {
- value = 10;
- callback();
- }, 200);
- };
- var B = function() {
- console.log(value);
- };
- A(function() {
- B();
- });
好的解决办法是写一个工具函数,接受我们的程序并控制整个过程。让我们先从最简单的开始:
- var queue = function(funcs) {
- // 接下来请看,董卿???
- }
- var queue = function(funcs) {
- var f = funcs.shift();
- f();
- }
- var queue = function(funcs) {
- var next = function() {
- // ...
- };
- var f = funcs.shift();
- f(next);
- };
- var queue = function(funcs) {
- var next = function() {
- var f = funcs.shift();
- f(next);
- };
- next();
- };
- var A = function(callback) {
- setTimeout(function() {
- value = 10;
- callback();
- }, 200);
- };
- var B = function(callback) {
- console.log(value);
- callback();
- };
要阻止这一点,我们应该检查funcs数组是否为空。
- var queue = function(funcs) {
- (function next() {
- if(funcs.length > 0) {
- var f = funcs.shift();
- f(next);
- }
- })();
- };
让我们试着想象尽可能多的情况。比如当前执行功能的 scope 。函数内的 this 关键字可能指向了全球的 window 对象。,如果我们可以设置自己的scope 当然是件很酷的事情。
- var queue = function(funcs, scope) {
- (function next() {
- if(funcs.length > 0) {
- var f = funcs.shift();
- f.apply(scope, [next]);
- }
- })();
- };
我们需要的最后一个特性,就是是函数间传递参数的能力。当然我们不知道具体会有多少参数将被使用。这就是为什么我们需要使用 arguments 变量的原因。你可能知道,该变量在每个 JavaScript函数中都是可用的,代表了传进来的参数。它就和一个数组差不多,但不完全是。因为在 apply 方法中我们需要使用真正的数组,使用一个小窍门来进行转换。
- var queue = function(funcs, scope) {
- (function next() {
- if(funcs.length > 0) {
- var f = funcs.shift();
- f.apply(scope, [next].concat(Array.prototype.slice.call(arguments, 0)));
- }
- })();
- };
- // 测试代码
- var obj = {
- value: null
- };
- queue([
- function(callback) {
- var self = this;
- setTimeout(function() {
- self.value = 10;
- callback(20);
- }, 200);
- },
- function(callback, add) {
- console.log(this.value + add);
- callback();
- },
- function() {
- console.log(obj.value);
- }
- ], obj);
- 30
- 10
- var queue = function(funcs, scope) {
- (function next() {
- if(funcs.length > 0) {
- funcs.shift().apply(scope || {}, [next].concat(Array.prototype.slice.call(arguments, 0)));
- }
- })();
- };
你可以 点击这里查看并调试相关代码,完整的测试代码如下:
- var queue = function(funcs, scope) {
- (function next() {
- if(funcs.length > 0) {
- funcs.shift().apply(scope || {}, [next].concat(Array.prototype.slice.call(arguments, 0)));
- }
- })();
- };
- var obj = {
- value: null
- };
- queue([
- function(callback) {
- var self = this;
- setTimeout(function() {
- self.value = 10;
- callback(20);
- }, 200);
- },
- function(callback, add) {
- console.log(this.value + add);
- callback();
- },
- function() {
- console.log(obj.value);
- }
- ], obj);
原文出处: krasimirtsonev
【短小强悍的JavaScript异步调用库】相关文章
5. Easystar.js:异步的 JavaScript 寻路游戏
7. JScrambler:保护你的JavaScript代码
8. 原生体验挡不住!JavaScript开源跨平台框架NativeScript
9. JavaScript开源跨平台框架NativeScript
10. RapydScript:将特定代码转换成JavaScript的预编译器
本文来源:https://www.51html5.com/a3593.html
﹝短小强悍的JavaScript异步调用库﹞相关内容
- JavaScript大师Nicholas C. Zakas谈TypeScript
- CoffeeScript 已死,CoffeeScript 万岁!
- jQuery实现用户登录的异步刷新
- jQuery图片异步加载和预加载功能
- 5个免费的JavaScript库和CSS框架的CDN加速
- 7个提高效率的JavaScript调试工具
- 15个提高编程技巧的JavaScript工具
- 9个最好用的JavaScript开发工具和代码编辑器
- 14款优秀的JavaScript调试工具大盘点
- 10 个优秀的JavaScript开发框架