异步是javascript的精髓
最近做了一个智能家居的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的精髓的更多相关文章
- 试读《JavaScript语言精髓与编程实践》
有幸看到iteye的活动,有幸读到<JavaScript语言精髓与编程实践_第2版>的试读版本,希望更有幸能完整的读到此书. 说来读这本书的冲动,来得很诡异,写一篇读后感,赢一本书,其实奖 ...
- ActiveX异步回调JavaScript
ActiveX异步回调JavaScript 开发环境:VC6.0. 背景知识:COM/ActiveX/JavaScript/MFC/Thread 想必用过Ajax的童鞋们都知道xmlhttp这个东西吧 ...
- 《JavaScript语言精髓与编程实践》读书笔记
JavaScript语言精髓与编程实践读书笔记 function v1(v1){ v1 = 100; alert('v1:'+v1); } function v2(name){ v1.apply(th ...
- C# 从后台代码同步或异步注册Javascript到页面之RegisterStartupScript和RegisterClientScriptBlock的区别
下面来讲讲同步注册JS和异步注册JS的区别 同步注册JS:RegisterClientScriptBlock,相当于在 form开始处(紧接 <form runat="server&q ...
- JavaScript语言精髓(1)之语法概要拾遗(转)
JavaScript语言精髓(1)之语法概要拾遗 逻辑运算 JavaScript中支持两种逻辑运算,“逻辑或(||)”和“逻辑与(&&)”,他们的使用方法与基本的布尔运算一致: v ...
- 了解JavaScript核心精髓(四)
ES6 1.import与require区别 import 是同步导入js模块. require 是异步导入js模块. 2.使用let与const let con1 = 3 //与var作用相似,le ...
- 了解JavaScript核心精髓(一)
ES5 1.声明脚本 <script type="text/javascript"></script> 2.DOM与BOM DOM(Document Obj ...
- Ajax异步与JavaScript的一些初浅认识
向服务器请求数据的技术 有以下五种常用技术用于向服务器请求数据 XMLHttpRequest(XHR) Dynamic script tag insertion(动态脚本标签插入) iframes C ...
- 了解JavaScript核心精髓(三)
1.js判断对象是否存在属性. hasOwnProperty(‘property’) 判断原型属性是否存在. "property" in o; 判断原型属性和原型链属性是否存在 ...
随机推荐
- 背水一战 Windows 10 (105) - 通知(Toast): 带按钮的 toast, 带输入的 toast(文本输入框,下拉选择框)
[源码下载] 背水一战 Windows 10 (105) - 通知(Toast): 带按钮的 toast, 带输入的 toast(文本输入框,下拉选择框) 作者:webabcd 介绍背水一战 Wind ...
- 吴恩达机器学习笔记6-梯度下降II(Gradient descent intuition)--梯度下降的直观理解
在之前的学习中,我们给出了一个数学上关于梯度下降的定义,本次视频我们更深入研究一下,更直观地感受一下这个算法是做什么的,以及梯度下降算法的更新过程有什么意义.梯度下降算法如下: 描述:对
- Kubenetes---Service
kubernetes的service有三种代理模式 userspace , iptables , ipvs ---------------------------------------------- ...
- python 中几种基本的矩阵操作应用
在图像处理中,python 的矩阵运算经常会用到一些简单的操作,可是,由于好久没用,很多东西还是忘记了,这里做个备忘: #-*-coding:utf-8-*- import numpy as np a ...
- mac中:不能完成此操作,因为找不到一个或多个需要的项目。(错误代码 -43)
今天使用mac删除某文件时,遇到此错误: 不能完成此操作,因为找不到一个或多个需要的项目.(错误代码 -43) 于是采用命令行删除可以正确删除:在要删除的文件夹坐在目录下执行 rm -rf tes ...
- Java多线程可以分组,还能这样玩!
前面的文章,栈长和大家分享过多线程创建的3种方式<实现 Java 多线程的 3 种方式>. 但如果线程很多的情况下,你知道如何对它们进行分组吗? 和 Dubbo 的服务分组一样,Java ...
- 请求被中止: 未能创建 SSL/TLS 安全通道
出现“请求被中止: 未能创建 SSL/TLS 安全通道.”的问题. 在创建请求地址的前面加了这句代码就可以了 System.Net.ServicePointManager.SecurityProtoc ...
- 深入理解JavaScript原型:prototype,__proto__和constructor
JavaScript语言的原型是前端开发者必须掌握的要点之一,但在使用原型时往往只关注了语法,其深层的原理并未理解透彻.本文结合笔者开发工作中遇到的问题详细讲解JavaScript原型的几个关键概念, ...
- C++11实现一个轻量级的AOP框架
AOP介绍 AOP(Aspect-Oriented Programming,面向方面编程),可以解决面向对象编程中的一些问题,是OOP的一种有益补充.面向对象编程中的继承是一种从上而下的关系,不适合定 ...
- 用js如何获取file是否存在
其实注意点就可以知道了. 举个例子 firebug看出这代码: <div id="SWFUpload_0_0" class="uploadify-queue-ite ...