最近做了一个智能家居的 App, 目前纯 JS 代码已经 4000 多行, 不包括任何引入的库. 还在不断升级改造中... 这个项目到处都是异步. 大多数都是 3~4 层调用. 给我的感觉就是异步当你习惯了, 你会发现很爽. 下面举个最简单的例子?
你知道怎么返回一个异步调用的值吗?
也许你会这么干
- function getValue(){
- var a = 10;
- setTimeout( function(){
- a += 10;
- }, 10 );
- return a;
- }
你肯定得不到你想要的 20
- function test(){
- var res = getValue();
- return res;
- }
- console.log( test() ); // 结果 10
为什么?
因为 settimeout 的原因, 把 a += 10 放在队列中, 等所有的同步代码完成之后, 才轮到他执行. 所以 return 的时候, 这个 a += 10 是没有执行的, 而且你也不知道, 异步到底什么时候完成? 这个是不确定的, 哪怕你设置了 10ms, 未必是 10ms.... 如果队列前面有耗时较长的其他任务, 10ms 还是得不到响应... 这样的例子太多了. 比如, 我最近的项目, 控制空调的关和开.. 很显然, 这个时间受制于网络和芯片, 以及空调的响应.. 并不是设置了多长时间, 就是那个时间返回.
那不知道他什么时候, 返回, 怎么拿到他的值?
用回调!
- function getValue2( fn ){
- var a = 10;
- setTimeout( function(){
- a += 10;
- fn && fn( a );
- }, 10 );
- return a;
- }
- function test2(){
- getValue2( function( res ){
- console.log( res );
- } );
- }
- test2();
你 GET 到了吗?
下面就是一个简单的异步调用了:
- var Q = {
- a : [],
- in : function( v ){
- if( !/number|function/.test( typeof( v ) ) ) return;
- this.a.push( v );
- return this;
- },
- out : function(){ // 前端全栈交流学习圈: 866109386
- var me = this;// 面向 1-3 年经验前端开发人员
- var v = me.a.shift();// 帮助突破技术瓶颈, 提升思维能力
- if( !v ) return;
- if( typeof( v ) == 'function' ) {
- v();
- me.out();
- return;
- }
- setTimeout( function(){
- me.out();
- }, v );
- }
- }
- function watch( res ){
- var oDiv = document.createElement( "div" );
- oDiv.innerhtml = res;
- // console.log( res );
- document.body.appendChild( oDiv );
- }
- Q.in( function(){
- watch( "1 <strong style='color:red'> 延时 3 秒 --> 输出 2</strong>" );
- })
- .in( 3000 )
- .in( function(){
- watch( "2 <strong style='color:green'> 延时 2 秒 --> 输出 2</strong>" );
- } )
- .in( 2000 )
- .in( function(){
- watch( "3 <strong style='color:blue'> 后面没有了 </strong>" );
- } ).out();
来源: http://www.qdfuns.com/article/51070/a1ded18e6c9841ad45579ab0de47dc30.html