javascript --- 非交互、交互、协作、任务

非交互:

var res = {};function foo(results) {res.foo = results;
}function bar(results) {res.bar = results;
}ajax( "http://some.url.1", foo);
ajax( "http://some.url.2", bar);// foo和bar彼此不相关,谁先执行都无所谓..不影响执行结果

交互:

// 交互1:执行顺序影响参数位置var res = [];function response(data) {res.push(data);
}ajax( "http://some.url.1", response);
ajax( "http://some.url.2", response);// ajax请求的结果会放到res中,根据先后顺序有可能产生我们不需要的结果.,
// 如我们想把第一个ajax的结果放到res[0]中,第二个ajax的结果放到res[1]中.但异步的不确定性,有可能先执行第2个ajax.
// 可以对response作如下的改变:var res = [];function response(data) {if(data.url === "ajax1") {res[0] = data;}else {if(data.url === "ajax2") {res[1] =data;}}
}ajax("http://some.url.1",response);
ajax("http://some.url.2",response);// 注:data.url是假设从服务器返回的标识字段.

// 交互2:参数缺失
var a, b;function foo(x) {a = x * 2;baz();
}function bar(y) {b = y * 2;baz();
}function baz() {console.log( a + b);
}ajax("http://some.url.1", foo);
ajax("http://some.url.2", bar);// 在两个ajax全部完成前(或只有1个ajax请求完成时,比如ajax1完成)会出现参数丢失的现象:即ajax1完成了,执行foo()方法.
// 先得到a,然后调用baz()方法,此时是没有b(undefined)的.
// 改进baz如下:function baz() {if( a && b ) {console.log(a + b);}
}

// 交互3:门闩:只执行第一个完成的函数
var a;function foo(x) {a = x * 2;baz();
}function bar(x) {a = x / 2;baz();
}function baz() {console.log(a);
}ajax( "http://some.url.1", foo );
ajax( "http://some.url.2", bar );// 后面执行的会覆盖前面的a
// 我们想a在第一次执行时就确定,改进如下:
function foo(x) {if(!a) {a = x * 2;baz();}
}function bar(x) {if(!a) {a = x / 2;baz();}
}

协作:

var res = [];function response(data) {res = res.concat( data.map( function(val) {return val * 2;}));
}ajax( "http://some.url.1", response);
ajax( "http://some.url.2", response);// 上述会将ajax请求的数据,全部翻倍..表面上看去没有问题...考虑1000万条记录
// 你会发现,一个回调函数会占用很长的时间,导致期间用户什么都不能做.what a pain..
// 改进如下:
function reponse(data) {var chunk = data.splice(0, 1000);res = res.concat( chunk.map( function (val) { return val * 2;})     );if (data.length > 0) {setTimeout( function () {response(data);}, 0 );}
}// 将大数据量切成小块.然后使用setTimeout放入到事件循环队列.这样就可以在处理数据的时候,同时让其他等待的事件有机会运行.
// 事件循环队列的伪代码如下:var eventLoop = [];
var event;while(true) {   // 永远执行// 一次tickif( eventLoop.length > 0) {event = event.Loop.shift();try {event();}catch (err) {reportError(err);}}
}// setTimeout({},0)相当于把response(data)推进了eventLoop.而事件循环是一个一个执行的.

任务:

// ES6一个建立在事件循环队列之上的新概念,任务队列.
console.log("A");setTimeout( function () {console.log( "B" );
}, 0 );// 理论上的"任务API"
schedule( function(){console.log( "C" );schedule( function() {console.log( "D" );});
});
// 任务队列是事件循环每一个tick之前执行的.

参考《你不知道的JavaScript》(中卷)P150~P156

javascript --- 非交互、交互、协作、任务相关推荐

python哨兵循环_Python：deadloop之非模态交互界面（模态循环）（哨兵循环）
deadloop之非模态交互界面(模态循环)(哨兵循环) 通过无限循环,条件退出,实现多模态的交互界面主要功能1:通过键盘按键g\w\r\b进行界面颜色改变,按q退出主要功能2:点击界面某处生成输 ...
iOS原生WebView中JavaScript和OC交互
在iOS开发中很多时候我们会和UIWebView打交道,目前国内的很多应用都采用了UIWebView的混合编程技术,最常见的是微信公众号的内容页面.前段时间在做微信公众平台相关的开发,发现很多应用场景 ...
java js获取css方法_5种JavaScript和CSS交互的方法
原标题:5种JavaScript和CSS交互的方法随着浏览器不断的升级改进,CSS和Java之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合 ...
flex与JavaScript的数据交互
上一篇发了 flex3 接受外部参数 ,但是后来想想,应该更进一步的了解 flex与JavaScript的数据交互. 第一种: test4.swf 代码: <?xml version=" ...
使用 Javascript 与 Flow 交互
本文假设读者是熟悉 JavaScript 和 React[1] 的开发者,对 Flow[2] 有着一定的了解,或者熟悉 Flow 智能合约语言 Cadence[3] 相关的概念. 我们将通过本文熟悉并 ...
响应式网页设计之JavaScript与CSS交互
JavaScript与CSS交互补充:文章中所有的代码都是写在html文件中,JS代码需要用< script >< /script >标签包起来. 文章目录 JavaScri ...
第七节_我的日记本开发手记（7）——Javascript与c#交互
这一节我们主要实现JavaScript与c#交互,都是一些基本知识,为我们后面的程序开发做好准备. 一.c#调用Javascript 在Formium 窗体中,使用ExecuteJavaScript和 ...
jQuery基础与JavaScript与CSS交互-第五章
目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器掌握过滤选择器掌握表单选择器 RIA技术常见的RIA技术 - Ajax - Sliverlight ...
目前国内有哪些开源的非 SaaS 团队协作平台、项目管理工具呢？
以下是一些常用的开源团队协作平台和项目管理工具: 1.Gitea Gitea 是一个轻量级的 Git 服务,它提供了一个基于 Web 的界面,以方便地管理 Git 存储库.Gitea 也是一个自托管的 ...

javascript --- 非交互、交互、协作、任务

javascript --- 非交互、交互、协作、任务相关推荐

最新文章

热门文章