最近做了一个智能家居的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(){
var me = this;
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();

异步是javascript的精髓的更多相关文章

  1. 试读《JavaScript语言精髓与编程实践》

    有幸看到iteye的活动,有幸读到<JavaScript语言精髓与编程实践_第2版>的试读版本,希望更有幸能完整的读到此书. 说来读这本书的冲动,来得很诡异,写一篇读后感,赢一本书,其实奖 ...

  2. ActiveX异步回调JavaScript

    ActiveX异步回调JavaScript 开发环境:VC6.0. 背景知识:COM/ActiveX/JavaScript/MFC/Thread 想必用过Ajax的童鞋们都知道xmlhttp这个东西吧 ...

  3. 《JavaScript语言精髓与编程实践》读书笔记

    JavaScript语言精髓与编程实践读书笔记 function v1(v1){ v1 = 100; alert('v1:'+v1); } function v2(name){ v1.apply(th ...

  4. C# 从后台代码同步或异步注册Javascript到页面之RegisterStartupScript和RegisterClientScriptBlock的区别

    下面来讲讲同步注册JS和异步注册JS的区别 同步注册JS:RegisterClientScriptBlock,相当于在 form开始处(紧接 <form runat="server&q ...

  5. JavaScript语言精髓(1)之语法概要拾遗(转)

    JavaScript语言精髓(1)之语法概要拾遗   逻辑运算 JavaScript中支持两种逻辑运算,“逻辑或(||)”和“逻辑与(&&)”,他们的使用方法与基本的布尔运算一致: v ...

  6. 了解JavaScript核心精髓(四)

    ES6 1.import与require区别 import 是同步导入js模块. require 是异步导入js模块. 2.使用let与const let con1 = 3 //与var作用相似,le ...

  7. 了解JavaScript核心精髓(一)

    ES5 1.声明脚本 <script type="text/javascript"></script> 2.DOM与BOM DOM(Document Obj ...

  8. Ajax异步与JavaScript的一些初浅认识

    向服务器请求数据的技术 有以下五种常用技术用于向服务器请求数据 XMLHttpRequest(XHR) Dynamic script tag insertion(动态脚本标签插入) iframes C ...

  9. 了解JavaScript核心精髓(三)

    1.js判断对象是否存在属性. hasOwnProperty(‘property’)  判断原型属性是否存在. "property" in o;  判断原型属性和原型链属性是否存在 ...

随机推荐

  1. 背水一战 Windows 10 (105) - 通知(Toast): 带按钮的 toast, 带输入的 toast(文本输入框,下拉选择框)

    [源码下载] 背水一战 Windows 10 (105) - 通知(Toast): 带按钮的 toast, 带输入的 toast(文本输入框,下拉选择框) 作者:webabcd 介绍背水一战 Wind ...

  2. 吴恩达机器学习笔记6-梯度下降II(Gradient descent intuition)--梯度下降的直观理解

    在之前的学习中,我们给出了一个数学上关于梯度下降的定义,本次视频我们更深入研究一下,更直观地感受一下这个算法是做什么的,以及梯度下降算法的更新过程有什么意义.梯度下降算法如下: 描述:对

  3. Kubenetes---Service

    kubernetes的service有三种代理模式 userspace , iptables , ipvs ---------------------------------------------- ...

  4. python 中几种基本的矩阵操作应用

    在图像处理中,python 的矩阵运算经常会用到一些简单的操作,可是,由于好久没用,很多东西还是忘记了,这里做个备忘: #-*-coding:utf-8-*- import numpy as np a ...

  5. mac中:不能完成此操作,因为找不到一个或多个需要的项目。(错误代码 -43)

    今天使用mac删除某文件时,遇到此错误: 不能完成此操作,因为找不到一个或多个需要的项目.(错误代码 -43) 于是采用命令行删除可以正确删除:在要删除的文件夹坐在目录下执行   rm -rf tes ...

  6. Java多线程可以分组,还能这样玩!

    前面的文章,栈长和大家分享过多线程创建的3种方式<实现 Java 多线程的 3 种方式>. 但如果线程很多的情况下,你知道如何对它们进行分组吗? 和 Dubbo 的服务分组一样,Java ...

  7. 请求被中止: 未能创建 SSL/TLS 安全通道

    出现“请求被中止: 未能创建 SSL/TLS 安全通道.”的问题. 在创建请求地址的前面加了这句代码就可以了 System.Net.ServicePointManager.SecurityProtoc ...

  8. 深入理解JavaScript原型:prototype,__proto__和constructor

    JavaScript语言的原型是前端开发者必须掌握的要点之一,但在使用原型时往往只关注了语法,其深层的原理并未理解透彻.本文结合笔者开发工作中遇到的问题详细讲解JavaScript原型的几个关键概念, ...

  9. C++11实现一个轻量级的AOP框架

    AOP介绍 AOP(Aspect-Oriented Programming,面向方面编程),可以解决面向对象编程中的一些问题,是OOP的一种有益补充.面向对象编程中的继承是一种从上而下的关系,不适合定 ...

  10. 用js如何获取file是否存在

    其实注意点就可以知道了. 举个例子 firebug看出这代码: <div id="SWFUpload_0_0" class="uploadify-queue-ite ...