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(按钮)问题
在项目中,我们往往会遇到这样的问题:因为网络较慢的原因,用户会不耐烦的一直去点击按钮,这样导致的结果时:相关代码一遍一遍的被重复执行,如果按钮的事件是网络请求的话,这样又导致一种网络请求的循环.所以我 ...
随机推荐
- 泛型学习第一天:List与IList的区别 (一)
先看代码: using System;using System.Collections.Generic;using System.Linq;using System.Text; namespace L ...
- Javascript的this用法---阮一峰
Javascript的this用法 作者: 阮一峰 日期: 2010年4月30日 this是Javascript语言的一个关键字. 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比 ...
- JMeter 3.0 POST Body Data 中文乱码问题
现象如下图所示:
- 格式化SQL和逆格式SQL
上篇说过SQLyog中的计算合适数据类型的功能,现在说下Navicat格式化SQL和逆格式化SQL 啥也不说了,一看图,一目了然,Beautify SQL(格式化,即变成最美的语句)和Minify S ...
- 使用饿了么ui表单验证报错: [Element Warn][Form]model is required for validat
[Element Warn][Form]model is required for validat 如文末的完整例子: 该提示说的是 form表单需要一个绑定一个 对象(使用:model=" ...
- python编程实例-统计apache进程占用的物理内存
#!/usr/bin/env python import os from subprocess import PIPE,Popen def getPids(): p = Popen(['pidof', ...
- zoj1967 poj2570 Fiber Network (floyd算法)
虽然不是最短路,但是询问时任意两点之间的信息都要知道才能回答,由此联想到floyd算法,只要都floyd算法的原理理解清楚了就会发现:这道题的思想和求任意两点之间的最短路的一样的,只不过是更新的信息不 ...
- WC2019 滚粗记
离开的时候一定是笑着离开的 不然就再也回不来了 广州二中,七月再见
- POJ - 2187:Beauty Contest (最简单的旋转卡壳,求最远距离)
Bessie, Farmer John's prize cow, has just won first place in a bovine beauty contest, earning the ti ...
- LeetCode Repeated String Match
原题链接在这里:https://leetcode.com/problems/repeated-string-match/description/ 题目: Given two strings A and ...