js防止重复点击
表单元素
disabled 没有之一。
el.prop('disabled', true);
ajax({}).done(function() { el.prop('disabled', false); });
非表单元素
非表单,自然没有 disabled 之说,但可以借助中间变量。
if (el.data().loading === true) return false;
el.data('loading', true);
ajax({}).done(function() { el.data('loading', false); });
配合CSS
最后再配合css就更完美了。
.disabled, button[disabled] { background-color:#ddd; }
下面的例子用jquery。
解决思路,设置一个条件来触发事件:
那么问题来了,怎么设置条件 ?
可以用setTimeout函数来改变条件的值。
function runa(){
console.log('is run');
}
var isRun=true;
$("#set").click(function(){
if(isRun){
runa();
isRun=false;
}
setTimeout(function(){
isRun=true;
},1500) //点击后相隔多长时间可执行
})
js防止重复点击的更多相关文章
- js 防止重复点击
1.添加flag 适用于ajax 表单提交,提交之前flag = false , 提及中,true ,提交后false 2.事件重复点击: <script> var throttle = ...
- 微信小程序使用函数防抖解决重复点击消耗性能问题
wxml: <view bindtap="doubleTap" bindtouchstart="touchStart" bindtouchend=&quo ...
- js 实现控制点击事件在特定的毫秒内 只允许点击一次(防止重复点击)
代码 第一种方法 var forbidRepeartClick = (function(){ var instance = null; var canClick = true; function Bu ...
- js节流函数和js防止重复提交的N种方法
应用情景 经典使用情景:js的一些事件,比如:onresize.scroll.mousemove.mousehover等: 还比如:手抖.手误.服务器没有响应之前的重复点击: 这些都是没有意义的,重复 ...
- 使用JavaScript动态的绑定、解绑 a 标签的onclick事件,防止重复点击
页面上的 a 标签如下: <a class="more" style="cursor: pointer;" id="commentMore&qu ...
- vue防重复点击(指令实现)
快速点击按钮会重复多次调用接口,防止出现这样的情况 全局定义,方便调用 新建plugins.js export default { install (Vue) { // 防重复点击(指令实现) Vue ...
- 限制 button 在 3 秒内不可重复点击
在下载或者上传文件过程中避免重复点击带来的多次同样的请求造成资源浪费,限制 button 的点击次数是很有必要的. 1. 增强用户体验,2. 减轻服务器压力. HTML 代码 <button i ...
- 关于Android避免按钮重复点击事件
最近测试人员测试我们的APP的时候,喜欢快速点击某个按钮,出现一个页面出现多次,测试人员能不能禁止这样.我自己点击了几下,确实存在这个问题,也感觉用户体验不太好.于是乎后来我搜了下加一个方法放在我们U ...
- iOS之防止用户重复点击Button(按钮)问题
在项目中,我们往往会遇到这样的问题:因为网络较慢的原因,用户会不耐烦的一直去点击按钮,这样导致的结果时:相关代码一遍一遍的被重复执行,如果按钮的事件是网络请求的话,这样又导致一种网络请求的循环.所以我 ...
随机推荐
- Java 框架
Netty: Netty是由JBOSS提供的一个java开源框架.Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客户端程序. 也就是说,Netty ...
- 5.2 Selenium2环境搭建
1.Java开发环境的搭建 本课程中将使用Java语言编写Selenium自动化测试脚本,在Eclipse集成开发环境中运行. (1)jdk的安装 a.下载 官网下载,http://www. ...
- IOC和DI,AOP的本质理解
IOC: Inversion of Control,控制反转, 控制权从应用程序转移到框架(如IOC容器),是框架共有的特性. 对于IOC的理解,可以把IOC看作是一个生产和管理bean对象的容器.原 ...
- vue 全选与取消全选
所用知识点 1 v-model:监听input内容 2 watch:监听属性方法 参考https://cn.vuejs.org/v2/api/#watch 3 页面初始化调用函数 mounted 一: ...
- IDEA提交Git时忽略文件【ignore文件备份】
IntellJ IDEA设置ignore文件忽略,需: 第一步:下载idea的ignore插件,链接:https://pan.baidu.com/s/14_cfq56g1s7Lc6LdiolvWA 密 ...
- 分布式_理论_07_ZAB
一.前言 二.参考资料 1.分布式理论(七)—— 一致性协议之 ZAB
- 20165210 预习作业3 Linux安装及学习
Linux安装及学习 一.Linux安装 通过参考教程:基于VirtualBox虚拟机安装Ubuntu图文教程成功的安装上了Linux但在过程中还是有一些小问题的. 首先按着步骤走,一开始没什么毛病, ...
- redis实战之事务与持久化
1. 事务描述 (1)什么是事务 事务,就是把一堆事情绑在一起,按顺序的执行,都成功了才算完成,否则恢复之前的样子 事务必须服从ACID原则,ACID原则分别是原子性(atomicity).一致性(c ...
- LeetCode Continuous Subarray Sum
原题链接在这里:https://leetcode.com/problems/continuous-subarray-sum/description/ 题目: Given a list of non-n ...
- npm镜像安装
安装淘宝NPM镜像 https://npm.taobao.org/ npm install -g cnpm --registry=https://registry.npm.taobao.org 配置 ...