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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251202.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ES5-6 作用域、作用域链、预编译、闭包基础

1. 作用域 上一级在执行时,内部函数被定义,内部函数便生成作用域和作用域链(拿上一级的环境),内部函数执行前生成自己的AO,并排在头部函数执行结束时,AO被销毁(回到被定义时的状态&…

electron 项目的搭建方式,借助 node 和 npm

1,首先确定安装了 node 和 npm 2,创建一个文件夹,如 aa 3,CMD 命令进入到 aa,用 npm 命令初始化一个项目 4, npm -init 根据提示完成配置 5,安装 electron > npm i -D electronlatest, 这一…

zbb20171215 git 版本回退

1. 使用git log命令查看所有的历史版本,获取某个历史版本的id,假设查到历史版本的id是139dcfaa558e3276b30b6b2e5cbbb9c00bbdca96。 2. git reset --hard 139dcfaa558e3276b30b6b2e5cbbb9c00bbdca96 3. 把修改推到远程服务器 git push -f -u origin ma…

ES5-7 立即执行函数、闭包深入、逗号运算符

1. 立即执行函数 定义在全局的函数只有关闭浏览器或者退出程序才会释放IIFE: Immediately-Invoked Function Expression解决页面加载自动执行,执行完成后立即释放(避免了只会执行一次的内容一直存在于全局)IIFE用匿名函数或者函数声明&#…

es6 --- 解构赋值的简洁性

设想你有一个工具foo,它可以异步产生两个值(x和y): function getY(x) {return new Promise( function(resolve, reject) {setTimeout( function() {resolve( (3*x) -1 );}, 100);}); }function foo(bar, baz) {var x bar * baz;return getY(x).then( function(y){return [x, …

redis安装(linux)

一、redis安装步骤 1、yum install gcc 如果你机器已经安装了编译环境请忽略,否则在使用make编译源码时会报错。 报错信息:make: *** [adlist.o] 2、使用wget命令下载包  wget http://download.redis.io/releases/redis-4.0.6.tar.gz 3、解压tar包 tar…

验证码何时可以退出历史舞台?

验证码是有必要存在的,只是不同阶段表现形式不同,未来的趋势是更加智能无感知,用户体验更好。 简而言之, 验证码其终极目的,就是区分正常人和机器的操作。区分人机行为是必要的:互联网上各种行为&#xff0…

ES5-8 闭包高级、对象、构造函数、实例化

1. 对象 对象内定义的函数一般称之为方法,在外部的函数声明称为函数对象删除属性使用delete 关键字 var obj {a: 1,b: string } console.log(obj, obj) // {a: 1, b: "string"} delete obj.b console.log(obj, obj) // {a: 1}在对象里,this…

es6 --- 使用生成器交替执行

考虑以下场景: var a 1; var b 2;function foo(){a;b b * a;a b 3; }function bar(){b--;a 8 b;b a * 2; }foo(); bar(); console.log(a, b); // 11 22bar(); foo(); console.log(a, b); // 183 180对于上面的两个函数foo和bar,它们中的任何一个,一旦开始了就会…

oracle-group by -having

1、GROUP BY 语句用于结合合计函数,根据一个或多个列对结果集进行分组。(也就是说group by 和聚合函数结合起来使用,要查询的结果来没有聚合函数则报错:不是group by 表达式) a、where 不能放在group by 后面使用 b、having 要和group by 连在…

【转载】汇编速查手册

一、数据传输指令 ─────────────────────────────────────── 它们在存贮器和寄存器、寄存器和输入输出端口之间传送数据. 1. 通用数据传送指令. MOV 传送字或字节. MOVSX 先符号扩展,再传送. MOVZX 先零扩展,再传送. PUSH 把字压…

ES5-9 【utils】构造函数及实例化原理、包装类

1. 构造函数 调用构造函数实际会经历4步 1 创建一个新对象 2 将构造函数的作用域赋值给对象(因此this就指向了这个对象) 3 执行构造函数中的代码(为这个新对象添加属性) 4 返回新对象 在构造函数内部,this指向构造函数…

es6 --- 异步迭代生成器 Promise

看一个经典ajax回调的例子: function foo(x, y, cb) {ajax("http://some.url.1/?x" x "&y" y,cb); }foo(11, 31, function(err, text) {if(err) {console.error(err);}else {console.log(text);} });// 异步请求some.url.1参数为x 11, y31的数据.…

Mysql5.7.20使用group by查询(select *)时出现错误--修改sql mode

使用select * from 表 group by 字段 时报错错误信息说明: 1055 - Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column haha_db.staff.id which is not    functionally dependent on columns in GROUP BY clause; this…

【心情随笔】03

一、 越是学习越是感到自己的无知。以往总有不求甚解的做法,稍微看了一下就囫囵吞枣算懂了,其实这是逃避,不仅面试问的时候答不上来,而且内部可以用来扩展的思想也没有领悟到。连该问题都说不清楚更不要说举一反三了。近来&#x…

ES5-10 原型、原型链、闭包立即执行函数、插件开发

重学第六章 1. 原型 实例内属性和原型上属性重名时(屏蔽) function Test(name) {this.name name } Test.prototype.name hhh let tObj new Test(yyy) console.log(tObj.name) // yyy tObj.name null console.log(tObj.name) // null delete tObj.…

javascript --- 使用run函数,让100条ajax依次执行

使用如下: function *foo(len,urlArray) {let r [];for(let i 0; i< len; i){r[i] yield request(urlArray[i]);} } // len:是长度,urlArray,是请求的url数组..下面附上run函数的代码,以及证明以上是成立的 // Benjamin Gruenbaum(benjamingr on Github) function run(g…

[转]IIS 允许/禁止 目录浏览

<?xml version"1.0" encoding"utf-8"?> <configuration><system.webServer><directoryBrowse enabled"true" /></system.webServer> </configuration> enabled true -> 允许目录浏览&#xff0c;子目…

C++编程基础一 06-布尔类型

1 // 06-布尔类型.cpp: 定义控制台应用程序的入口点。2 //3 4 #include "stdafx.h"5 #include <iostream>6 using namespace std;7 8 int main()9 { 10 bool a true; //真 存在的 非零 1 11 bool b false;//假 不存在 零 0 12 cout << …

性能优化杂记

webpack 开发、生产环境配置不同的webpack配置文件 生产环境删除devServer&#xff08;不需要启webpack devServer&#xff09; 告诉webpack&#xff0c;生产、开发分别要对应哪个配置文件 开发环境下也能看到打包的结果 npm run dev:build npm run dev 只会把打包生产…