前言
我们在前端有重复点击的问题。由于
网络的存在,
用户无法及时得到反馈。它可能会选择再次点击。
所以在这个时候,后端会有两个重复请求,这可能会导致严重的问题,特别是在发送邮件时,会增加两个重复的数据。
以前我遇到这种
情况会在请求做一个要求js变量,请求是异步的,所以我会在该变量的要求开始
设置为false,当请求结束后,无论成功或失败,将该变量设置为true,简单的代码:
VaR可以=真
功能发布资料(){
如果(!CanRequest)返回
获取(URL)
然后
要求=真
})
catch
要求=真
})
要求= false
}
这样做没有什么错,但是考虑到在点击后把按钮放到灰上,我
发现了一种防止CSS级别重复点击的
方法。
下面是获取SMS验证码的示例:
获取验证码
{体
显示:flex;
身高:100vh;
}
{ #计数
保证金:汽车;
填料:10px;
宽度:100px;
border: 1px solid;
文本对齐:中心;
光标:指针;
边界半径:4px;
}
{。禁用
指针事件:无;
颜色:# 666;
}
const数= document.getelementbyid(count)
const尖= count.textcontent
count.onclick = E = > {
(111)console.log
count.classlist.add('disable)
count.textcontent = 10
Var(setInterval)(ID = = > {
count.textcontent-—
如果(count.textcontent <= 0){
count.classlist.remove('disable)
count.textcontent =尖
ClearInterval(ID)
}
},1000)
}
注意:如果您不知道指针事件知道什么,请看这篇文章。
演示链接:点击这里
总结
以上就是本文的全部内容。希望本文的内容能给大家的
学习或
工作带来一定的帮助。如果有任何疑问,您可以留言交流,谢谢您的
支持。