苦逼前端

按钮连点&重复提交

Javascript2015-06-01 15:32

关于ajax重复提交,已经是老生常谈了,相信各位早已有N种不同的解决方法了。传送门

既然已经解决了重复提交的问题,那按钮连点也不存在什么问题了吧,为什么还要单独拿出来说呢?

最近在做客户端开发的时候,遇到一些连点的问题。比如,点击某个按钮会调起一个webview来装载一个页面,调起webview的操作是异步的,但是完全没有"调起中"和"调起后"的回调或状态,这样就没办法在"调起中"这种状态下阻止用户的下一次点击。

表现出来的现象是,用户点击过快的情况下,会连开几个页面。既然无法在过程中控制,那就只能在源头控制了:控制点击事件的触发频率。

很自然的我们想到了stopImmediatePropagation,它可以阻止"同一个节点(还有后续节点)上其它相同事件监听函数"的触发。

但是也有一些它阻止不了的,比如在本次绑定监听函数之前绑定的监听函数,这么说有点绕,举个例子:

var $a = document.querySelector('a'); 
$a.addEventListener('click', function(){
    console.log(1);
}); 
$a.addEventListener('click', function(e){
    e.stopImmediatePropagation();
});
$a.addEventListener('click', function(){
    console.log(2);
});

这种情况下,第一次绑定的console.log(1)是阻止不了的。这种情况也好办,在公共文件的头部,加上这个事件阻止就万事大吉了。

但还有另外一种情况:利用事件冒泡绑定的函数。这种情况就比较蛋疼了。因为你要确切的知道这个冒泡事件绑定的父节点,在这个父节点绑定一个相同类型的事件监听,才能阻止其他相同节点上事件监听函数的触发。

在项目开始阶段注意这个问题就好办了,统一一下这个父节点的class,然后统一绑定一个限制频率的监听函数。

到了项目优化阶段才意识到这个问题,改动成本就有些大了。最后贴一下限制频率的监听函数(以class为"js-a"的节点为目标节点,class为"js-parent"的节点为事件委托的父节点):

function frequent(el, e, interval){
    if(el.clickTime && new Date().getTime() - el.clickTime < interval){
        e.stopImmediatePropagation();
    }
    else{
        el.clickTime = new Date().getTime();
    }
};
$('.js-a').click(function(e){
    frequent(this, e, 1000);
});
$('.js-parent').on('click', '.js-a', function(e){
    frequent(this, e, 1000);
});
评论(0)
  • 暂无评论,求挽尊...
还可输入200个字