异步是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; 判断原型属性和原型链属性是否存在 ...
随机推荐
- 学习Axure RP原型设计
1 概述 原型设计是应用开发设计的第一要素.好的原型设计不仅可以起到沟通的作用,而且对客户而言应用程序拥有更直观的体现.原型设计通过内容和结构展示以及界面布局编排,实现在开发前期用户与产品进行交互.提 ...
- jquery mobile Touch事件
Touch事件在用户触摸屏幕(页面)时触发 1.jquery mobile tap tap事件在用户敲击某个元素时触发 $("p").on("tap",fucn ...
- 朴素贝叶斯算法简介及python代码实现分析
概念: 贝叶斯定理:贝叶斯理论是以18世纪的一位神学家托马斯.贝叶斯(Thomas Bayes)命名.通常,事件A在事件B(发生)的条件下的概率,与事件B在事件A(发生)的条件下的概率是不一样的:然而 ...
- AI - 机器学习常见算法简介(Common Algorithms)
机器学习常见算法简介 - 原文链接:http://usblogs.pwc.com/emerging-technology/machine-learning-methods-infographic/ 应 ...
- 性能瓶颈之Source
数据源的瓶颈通常发生从数据库读取数据的时候,原因通常如下: 1) 脚本的查询效率低下 2) 数据库网络包太小 如何判定源瓶颈 通过在session log中读取thread statistics判定源 ...
- js对象之XMLHttpReques对象学习
背景:业务需求是,一个前端(手机和浏览器)HTML页面中有图片,按钮......,需要统计用户点击图片或者按钮的次数. 前端实现:通过一个js来统计HTML页面中所有的图片和按钮对象,并给每个对象赋予 ...
- eos开发(一) eos开发环境搭建
区块链最近挺火的,我又是个非常缺钱的人,所以紧跟了潮流一头扎进区块链的研究中. 这EOS项目是目前比较火的一个项目,相信很多朋友拿到这份EOS的源代码后都会一脸懵逼,因为……这代码写得太高级了,老纸看 ...
- Java核心技术及面试指南 数据库方面的面试题归纳以及总结
5.1.7.1 事务的四大特性是什么? ⑴ 原子性(Atomicity) 原子性是指事务包含的所有操作要么全部成功,要么全部失败回滚. ⑵ 一致性(Consistency) 一致性是指事务必须使数据库 ...
- State状态模式
1.简介 在日常开发中,某些对象的状态如果发生改变,对应的行为也将发生改变,那么如何在运行时根据对象的状态动态的改变对象的行为,同时不产生紧耦合关系(即使用if else或者swith所带来的紧耦合关 ...
- 剑指offer--2
前言:继续笔记分享! 面试题6:暂无好的解决方法先搁浅一下 面试题7: #include<stdio.h> #include<stdlib.h> typedef struct ...