JavaScript 简单的理解异步

简介

异步加载是JavaScript开发中最关键的技术之一，主要可利用异步构建快速、高效的JavaScript应用。在众多WEB页面中为了避免服务器请求过多导致服务器崩溃，则可使用JavaScript异步技术。

简单的例子

未使用异步

在未使用JavaScript异步加载之前，用户访问服务器是一下子访问然后在加载各种图片和文字的，则会造成服务器的资源消耗。

使用异步

使用异步之后，当用户访问服务器的时候，页面是根据用户的移动而随着加载的，是断断续续的，而不是一下子造成大量的服务器请求。

队列

什么是队列

当调用某个函数的时候，会有一个异步延时事件加入队列，然后接着执行下一行代码直到最后没有任何代码进行执行（此时JavaScript会问队列里是否还有数据）。

队列实例

当点击按钮之后，则按钮中的数据会将数据添加到队列之中，输入和点击队列。

异步加载函数

setTimeout()

setTimeout()函数是在JavaScript异步加载中常见的异步加载函数，例子如下：

1
2
3
4
5
6
7
8

<script>
		for (var one = 1; one <= 3; one++) {
		setTimeout (function() {
			document.write(one,"<br>");
			},3000);        /*三秒后输出语句*/
		};
</script>
<p id="data()"></p>

只所以最后输出结果为“4.4.4”是因为这里的延时为3秒，定义的函数都会抢着要第一个触发

线程的堵塞

1
2
3
4
5
6
7
8

var start = new Date;
setTimeout(function() {
	var end = new Date;
	console.log("经过时间：",end - start,'ms');
}, 3000);
while (new Date - start < 1000) {
	// code
}

以上代码根据实际理念应该是等待3秒后执行，而实际运行当中则打印时间为3001。这时主要问题出现在setTimeout函数之中，因为setTimeout和setIn-terval一样，计时精度要比预期望差很多。

1
2
3
4
5
6
7
8

var start = new Date;
setTimeout(function() {
	var end = new Date;
	console.log("经过时间：",end - start,'ms');
}, 500);
while (new Date - start < 1000) {
	// code
}

而输出的数据至少是1000，因为setTimeout回调while循环结束运行之前不可能被触发。

setInterval()

1
2
3

setInterval(function() {
	console.log("Hello");
}, 3000);