每日一记 - 但并不日更
很多时候我们点击按钮来提交数据，但是在网络条件不好或者交互提示不明确的情况下，用户会在段时间内多次点击按钮，如果没有对按钮做保护就会造成重复的数据提交，造成数据异常，今天就分享一个比较通用的解决方案。
解决这个问题的思路就是增加一个变量来维护现有按钮的状态，但是一个页面里如果有很多按钮，那么就要申明同等数量的变量，这对维护来说很不友好。
现有问题
<div class="button">
提交
</div>
var button = document.querySelector('.button');
button.onclick = submit;
function submit (e) {
// 模拟异步
var promiseCb = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('提交成功');
}, 1000);
})
return promiseCb.then(
function (res) {
// 处理回调
console.log(res);
}
)
}
没有提交中的保护
解决方法
为了更好的封装旧的代码，就必须避免增加额外的变量，所以写了一个 actionDelegate 函数来对原有的 action 进行封装，而原有的代码只需要修改一下就可以了
button.onclick = submit;
↓
button.onclick = actionDelegate(submit);
function actionDelegate (action) {
// do something
}
然后我们要对 action 进行类型的判断，如果 action 返回的是普通的对象，那么我们认为这个 action 是一个同步的函数；如果 action 返回的是一个 promsie，那么我们认为我们需要等待这个 promise 状态结束后才能让这个 action 再次执行
function actionDelegate (action) {
// 获取函数返回值
var returnValue = action(e);
// 判断返回值是 promise
if (returnValue && returnValue.constructor &&
returnValue.constructor.name === 'Promise') {
// 保护按钮不被狂点
}
else {
// let it go
}
}
所以在 submit 函数中最终必须要返回一个 promise 就变得很重要
function submit (e) {
// 模拟异步
var promiseCb = new Promise(...)
return promiseCb
}
接着我们就要处理最重要的部分了，那就是保存按钮的状态，在这个案例里我通过 event 获取到了按钮的 node，并且把状态保存在 node 的 attr 上，这边也可以使用其他的方式去储存状态
function actionDelegate (action) {
return function (e) {
if (e.target.getAttribute('progress-status') === 'processing') {
// 如果按钮上有处理中的状态则跳过后续逻辑
return false;
}
// 获取函数返回值
var returnValue = action(e);
// 判断返回值是 promise
if (returnValue && returnValue.constructor &&
returnValue.constructor.name === 'Promise') {
// 关键点 把按钮状态保存在 node 的属性上
e.target.setAttribute('progress-status', 'processing')
return returnValue.then(
function () {
// promise 结束后重置状态
e.target.setAttribute('progress-status', 'initial');
}
)
}
}
}
最后代码组装起来就是下面的样子
var button = document.querySelector('.button');
button.onclick = actionDelegate(submit);
function submit (e) {
// 模拟异步
var promiseCb = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('提交成功');
}, 1000);
})
return promiseCb.then(
function (res) {
// 处理回调
console.log(res);
}
)
}
function actionDelegate (action) {
return function (e) {
if (e.target.getAttribute('progress-status') === 'processing') {
// 如果按钮上有处理中的状态则跳过后续逻辑
return false;
}
// 获取函数返回值
var returnValue = action(e);
// 判断返回值是 promise
if (returnValue && returnValue.constructor &&
returnValue.constructor.name === 'Promise') {
var originInnerHTML = e.target.innerHTML;
// 关键点 把按钮状态保存在 node 的属性上
e.target.setAttribute('progress-status', 'processing')
e.target.innerHTML = '提交中...';
return returnValue.then(
function () {
// promise 结束后重置状态
e.target.setAttribute('progress-status', 'initial');
e.target.innerHTML = originInnerHTML;
}
)
}
}
}
执行中则忽略点击
后记
本来是用 angularjs 实现的一个指令，用来代替 ng-click 的，后来发现在别的项目里也要用，所以就用原生的代码重新实现了逻辑。在 angularjs 中可能会更好实现，因为指令本身会有独立的作用域就不需要重复申明变量了。今天在写教程的时候突然发现用 attr 来实现可能更方便，各位如果有更好的实现方式可以来交流。
谢谢
如果喜欢这篇文章 可以关注专栏
也请点赞分享哦
