一个异步编程的场景分析

一个常见场景，点击保存，获取表单数据，发送请求。
一种防重复点击的策略：点击按钮，出现遮罩，提交请求。。。能不能保证只提交一次请求呢？

未点保存时页面处理很卡没有响应的情况呢？
点了保存后的操作导致页面无响应时继续点保存呢？

在表单超复杂，用户的系统配置低的情况下，获取表单数据可能会花很长一段时间，甚至让浏览器停止响应，这时保存操作导致浏览器停止响应而我们又再次点击了保存按钮，会触发点击事件吗？会在什么时机执行。特别是我们的点击事件触发了一个异步的保存操作的情况下。

看下面的代码。
```JavaScript
var btn = document.querySelector('button');
btn.onclick = function(){
console.log('事件响应')
//页面卡5s
var time = new Date().getTime();
while(new Date().getTime()-time < 5000){

}
setTimeout(function(){
console.log('timeout');
},0)
}
```

快速连续点5次按钮。
输出顺序：
‘事件响应‘　每5s输出一个
‘timeout‘　瞬间输出5个

一开始以为是点击事件的优先级比setTimeout要高，所以先执行。
后来发现dom点击事件与setTimeout在event loop都是属于macrotask。
是我的5次点击结束之后才会执行到setTimeout，所以是5次点击事件加入消息队列的顺序先于setTimeout，所以先执行。没毛病。

当我们的浏览器因为代码执行时间过长停止响应的时候，依然是可以往事件队列中添加事件的。来自用户操作，来自网络等。

加入遮罩。用display：none。替代。
```JavaScript
var btn = document.querySelector('button');
btn.onclick = function(){
console.log('事件响应')
//页面卡5s
var time = new Date().getTime();
while(new Date().getTime()-time < 5000){

}
btn.style.display = 'none';//隐藏
setTimeout(function(){
console.log('timeout');
},0)
}
```

输出：
事件响应　1次
timeout 1次

所以是可以实现只点击一次的效果的。

然而，在我们的项目中，出现了保存多次的情况。　
观察发现，只是当开页面的那个瞬间狂点保存会出现保存多次的情况。同时我们的耗时操作是在异步操作中。分离场景如下：

```JavaScript
var btn = document.querySelector('button');
btn.onclick = function(){
console.log('事件响应')
setTimeout(function(){
//页面卡2s
var time = new Date().getTime();
while(new Date().getTime()-time < 2000){}
btn.style.display = 'none';//隐藏按钮
console.log('保存数据',new Date().getTime());
},0)
}
//加载完之后让页面卡5秒，在这5s中点击按钮。
window.onload = function(){
setTimeout(function(){
console.log('卡页面，请在卡页面的时候点三次保存')
var time = new Date().getTime();
while(new Date().getTime()-time < 5000){}
console.log('卡页面结束');
},1000)

}
```

在点保存之前页面就很卡的时候，连续点3次按钮：
事件响应 X 3
保存数据 1517486862740
保存数据 1517486864742
保存数据 1517486866742
页面正常的情况下连续点3次保存按钮，输出　事件响应　1次　保存数据　1次

回到上面的问题，遮罩防点击的思路用的时候并不是那么靠谱。所以我们主要考虑页面本来很卡的时候我们再点了多次保存，这个时候遮罩无法阻挡我们保存多次。要用其他的防护措施。比如加个class表示暂时不能点它。

一个异步编程的场景分析

猜你喜欢