先说一件大家都知道的一句话
javaScript语言的一大特点是单线程,单线程就是一次他只能做一件事~
其实我也在学js的时候,在很多博客都看过这句话,好像是一眼就看懂了,但是一直不知道这句话到底是干嘛的,到底有什么用~,所以就注定有些bug还是要踩一次.
第一个因为js是单线程的困惑来自于WebApi的动态创建元素, 对,异步并不是我在ajax里面学习到的,而是DOM里面学习到的,但是ajax让我更深的去理解了什么是异步
先看下第一段让我困惑,但是其实非常简单的异步代码,把核心逻辑简化后的代码(其实很简单,每个人都看得懂)
<div>
<ul>
<li>我是第一个li</li>
<li>我是第二个li</li>
</ul>
<input id="btn" type="button" value="动态生成一个li">
</div>
var li = document.getElementsByTagName('li');
var btn = document.getElementById(('btn'));
//动态创建一个li元素
btn.onclick = function () {
var li = document.createElement('li');
li.innerHTML="我是动态创建的li";
document.getElementsByTagName('ul')[0].appendChild(li);
};
//给每一个li元素注册点击事件,当点击的时候,让背景颜色变红
for (let i = 0; i < li.length; i++) {
li[i].onclick = function () {
li[i].style.backgroundColor ='red';
}
}
console.log(1);
setTimeout(function () {
console.log(2)
}, 0);
console.log(3);
//输出结果1 3 2
</pre>
执行的结果却是,动态创建的li标签,没有点击事件...
上面这个问题其实对于一个不了解什么是异步的小白来说,真的是一个很大的问题,拿到这个问题后,我开始了一大串的百度,最后,问题没有得到实质的解决,反而拿到一个新的概念,叫"异步";
什么是异步任务?
简单的理解就是,js中所有的代码块都可以按照任务分为两种任务,一种是同步任务,一种是异步任务,而js遇到这两种任务的时候,会按照同步和异步两种类别进行区别对待.
同步任务进入主线程,从上往下执行,一条一条代码执行,形成一个叫执行栈的东西
异步任务会进入另外一个任务队列中,要等待主线程执行完了,才会执行,
异步任务包括像需要用户触发的点击事件,滚动事件,键盘事件,定时器等等,我喜欢简单的去理解 ,我的理解是未来才会发生的事件就是异步事件
听起来肯定还是有些复杂,很抽象,我们用一张图来表示
看到上面这张图中,左边的同步任务非常好理解,那就来说一下右边的异步任务;
当事件被识别为异步任务的时候,浏览器会把这个任务放在 Event Table
这个Event Table会把传入的异步事件注册为一个回调函数,然后传给Event Queue,
事件注册为回调函数后,并放在Event Queue中等待,那什么时候这个回调函数会被执行呢?
js中引擎中有一个monitoring process进程,在主线程执行完毕后 , 会不断的检查Event Queue有没有回调函数在等待执行,如果有,就把这个回调函数放在主线程上执行
而这个异步任务不断排队,主线程不断检查异步排队,主线程不断执行的循环就叫事件循环 Event Loop
了解了事件循环,再来看上面的代码,就能够发现问题的原因:
1.定时器的时间就算是0.他也是一个异步任务,HTML5标准规定了setTimeout()的第二个参数的最小值（最短间隔），不得低于4毫秒，如果低于这个值，就会自动增加
2.动态创建元素的问题
//动态创建一个li元素
btn.onclick = function () {
var li = document.createElement('li');
li.innerHTML="我是动态创建的li";
document.getElementsByTagName('ul')[0].appendChild(li);
};
//给每一个li元素注册点击事件,当点击的时候,让背景颜色变红
for (let i = 0; i < li.length; i++) {
li[i].onclick = function () {
li[i].style.backgroundColor ='red';
}
}
1.btn.onclick = function(){} 已经被注册成一个回调函数,等待在事件队列中,注册的回调函数中li没有点击事件,,此时for循环已经结束
知道原理后其实简单的修改一下就可以了,原理就是虽然你在队列中排队,但是点击事件已经注册在排队里的回调函数里面的, 把事件注册在了未来
function fn() {
var li = document.createElement('li');
li.innerHTML = "我是动态创建的li";
document.getElementsByTagName('ul')[0].appendChild(li);
li.onclick = function () {
li.style.backgroundColor = 'red';
}
}
btn.onclick = fn;
知道异步后有什么用?
了解异步之后,对于回调函数的学习能起到一个顺水推舟的作用,而回调函数是js语言中非常重要的一个东西, 可以说是js中的精髓了, 异步是未来才会执行的事件,而回调函数专门用来接收未来才会有结果的数据.一张图来解释~
我们知道在ajax中请求拿到的结果是一个异步操作,而这个结果,是我在未来才能拿到的一个结果,而且作为函数的封装者,这个未来的结果,我不能自己用, 而是要把未来的结果给别人用 . 这就让人很蒙圈 .话不多数,我们先来看下jQuery封装的ajax
$.ajax({
type:'get',
url:"",
data:{},
success:function (data) {
//我的data是未来(请求成功后)才会有结果是数据
console.log("成功的回调函数")
}
})
success是一个异步结果,我们把他按照异步的原理简化一下
//假设fn是一个帮我在服务器端拿数据的一个函数,拿到后他不能自己处理,因为他的作用是帮我拿数据
function fn(a,callback){
//我是一个成功后的回调异步结果
setTimeout(function () {
//我是回调函数,我把未来才会产生的结果作为参数传给了我的调用者
a = 500;
callback(a);
},100)
}
//我需要用一个数据,但是这个数据我在未来才能用的到,我传入一个回调函数,他帮我带来了未来的结果
fn(100,function (data){
var b = 1000;
console.log(data + b); //1500
})
第一次js执行,fn调用,传参100,并在第二个参数里声明了一个匿名函数,此时主线程执行完毕
事件队列100毫秒后,把a=500;作为参数传入回调函数,同时调用回调函数
fn中的第二个参数拿到实参并执行回调代码
这样callback就完成了他的使命,拿到异步结果,把结果作为参数给调用者进行运算
最后有兴趣的再看下源生的封装
function ajax (method, url, params, done) {
method = method.toUpperCase();
var xhr = new XMLHttpRequest();
if (typeof params === 'object') {
var tempArr = []
for (var key in params) {
var value = params[key]
tempArr.push(key + '=' + value)
};
params = tempArr.join('&');
};
if (method === 'GET') {
url += '?' + params
};
xhr.open(method, url, false);
var data = null;
if (method === 'POST') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
data = params
};
xhr.onreadystatechange = function () {
if (this.readyState !== 4) return
//this,responseText是未来的结果
//被done回调函数带走了
done(this.responseText);
};
xhr.send(data);
};
// 调用者============================
ajax('get', 'time.php', {}, onDone(a){})</pre>
