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(按钮)问题
在项目中,我们往往会遇到这样的问题:因为网络较慢的原因,用户会不耐烦的一直去点击按钮,这样导致的结果时:相关代码一遍一遍的被重复执行,如果按钮的事件是网络请求的话,这样又导致一种网络请求的循环.所以我 ...
随机推荐
- 【P2564】生日礼物(单调队列)
这个题看上去状态比较多,实际上由于题目的输出需要,又因为是一个线性的结构,所以我们可以有一些操作. 这么想,如果我们有了一个满足条件的区间,此时我们缩减左端点,然后判断此时是否还是满足,满足就继续缩减 ...
- Android 手机上获取手机当前上网IP地址
[转] 原文 Android 手机上获取手机当前上网IP地址 (手机网关给手机号分配的IP) 每个手机上网通过移动网关的时候,网关都会给该手 ...
- linux-RabbitMQ安装命令
一.RabbitMQ 1.安装配置epel源 $ rpm -ivh http://dl.fedoraproject.org/pub/epel/6/i386/epel-release-6-8.no ...
- vlan 配置
在RedHat上配置vlan: ~]$ modinfo 8021q在ethX接口上配置vlan逻辑子接口: DEVICE=ethX. BOOTPROTO=none ONBOOT=yes IPADDR= ...
- b树的实现(c++)
转自:http://blog.chinaunix.net/uid-20196318-id-3030529.html B树的定义 假设B树的度为t(t>=2),则B树满足如下要求:(参考算法导论) ...
- review32
一个类的两个对象如果具有相同的引用,那么他们就具有相同的实体和功能.
- Composer 入门使用手册
依赖管理 官网地址:http://docs.phpcomposer.com/00-intro.html#Locally Composer 不是一个包管理器.是的,它涉及 "packages& ...
- spring boot: 组合注解与元注解
package ch2.annotation; //target/elementType用来设定注解的使用范围 import java.lang.annotation.ElementType; imp ...
- python直接赋值,浅拷贝和深拷贝
本文参考自<Python 直接赋值.浅拷贝和深度拷贝解析> 定义 直接赋值:就是对象的引用(别名) 浅拷贝(copy):拷贝父对象,不拷贝对象内部的子对象 深拷贝(deepcopy):co ...
- abd 命令
adb全称Android Debug Bridge ,安卓调试桥接器.它是Android SDK里面的一个工具,用这个工具可以直接操作管理Android模拟器或者真实Android设备.adb的工作方 ...