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依然可以变红。