一个异步编程的场景分析

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


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


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


看下面的代码。
```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表示暂时不能点它。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值