异步编程--介绍同步和异步

最新推荐文章于 2024-07-03 09:33:00 发布

jiaojsun

最新推荐文章于 2024-07-03 09:33:00 发布

阅读量706

点赞数

分类专栏： ES6 异步编程

本文链接：https://blog.csdn.net/jiaojsun/article/details/82857090

版权

ES6 同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

异步编程

6 篇文章 1 订阅

订阅专栏

1.异步编程

js是单线程的，所谓线程类似于游戏中的任务线。

一个主要的任务流程，处理我们的js程序，把一些耗时的事情通过新开线程的方式来实现，这就叫做异步编程。
常用的异步方式有

   - setTimeout
   - setInterval
   - ajax

2.同步和异步解释

首先搭建一个简易的服务器 app.js代码如下，3s后返回请求。

const express = require('express');
const app = express();

app.get('/', (req, res) => {

	res.setHeader('Access-Control-Allow-Origin', '*')

	setTimeout(() => {
		res.send('Hello');
	}, 3000);

});

app.listen(7777);

前端代码中ui部分如下

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.box {
			width: 100px;
			height: 100px;
			background: red;
		}
	</style>
</head>
<body>
	<button>按钮</button>
	<div class="box"></div>
    <script></script>
</body>
</html>

界面显示为

接下来编写js代码，讲解异步和同步的效果区别

</script>
        var btn = document.querySelector('button');
		var div = document.querySelector('div');

		btn.onclick = function() {
			var xhr = new XMLHttpRequest();
			xhr.onload = function() {
				console.log(this.responseText);
			}
			xhr.open('get', 'http://localhost:7777/', false);
			xhr.send();
			console.log(1)
		}

		div.onclick = function() {
			this.style.background = 'green';
		}
</script>

上面代码的效果是点击按钮，3s之内点击红色div，div不会变绿色。这是为什么呢？？

xhr.open('get', 'http://localhost:7777/', false); 重点是这行语句的第三个参数哦
// true : 异步，ajax的事情还没有处理完成的时候，我们点击div，是可以立马变色，ajax的事情并不影响当前页面中其他的效果
// false : 同步，当前线程直接处理

所以把上面的false改成true，及时控制台没有打印hello，红色div依然可以变红。

jiaojsun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
异步编程--介绍同步和异步

1.异步编程js是单线程的，所谓线程类似于游戏中的任务线。一个主要的任务流程，处理我们的js程序，把一些耗时的事情通过新开线程的方式来实现，这就叫做异步编程。常用的异步方式有 - setTimeout - setInterval - ajax2.同步和异步解释首先搭建一个简易的服务器 app.js代码如下，3s后返回请求。const express...
复制链接

扫一扫

专栏目录