导航:首页 > 编程语言 > js避免频繁点击

js避免频繁点击

发布时间:2024-11-03 15:34:19

㈠ 求js 大神指导,页面的防止重复点击事件(具体见补充)

点击事件里给button标签加一个自定义属性,存上次点击时间

㈡ html、js轮播图怎么阻止快速、多次点击造成的混乱

古老的做法是用settimeout或者setinterval实现循环动画,但是这样就会造成题主说的,在且页面的时候会造成混乱。

因为当页面失去焦点时浏览器不再渲染页面,但是settimeout/setinterval的请求不会停止,队列会一直堆积动画,当页面再次获得焦点时动画队列早已堆积了大量命令,就会导致动画混乱。

现在的做法,笼统地说,是使用requestanimationframe函数,用法和settimeout/setinterval类似,只不过requestanimationframe不接受时间参数,函数的执行频率由浏览器的渲染帧数决定,这就实现了由浏览器决定动画队列,避免了动画混乱。当然也可以使用一些现成的轮播图插件,题主可以自己网络,这里对比举例说明一下settimeout和requestanimationframe的用法。

//用setTimeout实现在控制台循环输出helloworld
functionfun(){
console.log('helloworld');
setTimeout(function(){
fun();
},3000);
}
fun();//执行fun函数,就可以每隔3000毫秒递归的输出helloworld


//用reqestanimationframe实现在控制台循环输出helloworld
functionfun(){
console.log('helloworld');
requestAnimationFrame(function(){
fun();
})
}
fun()//执行fun函数,就可以每隔3000毫秒递归的输出helloworld


//requestAnimationFrame没有时间参数,所以直接使用不能控制间隔
//但我们可以人为的限制执行间隔,方法如下
functionfun(last_time){
if(newDate().getTime()-last_time>3000){
console.log('helloworld');
requestAnimationFrame(function(){
fun(newDate().getTime());
})
}else{
requestAnimationFrame(function(){
fun(last_time)
});
}
}
fun(newDate().getTime())
//这样就可以为requestAnimationFrame设置间隔,实现每隔3000毫秒输出helloworld
//抱歉我主写c副写python偶尔写javaweb,分号用的有些乱。

㈢ vue.js怎样解决按钮多次点击重复提交

建议使用ref,给button添加注册ref引用,然后在表单提交的时候,获取button按钮,使其disable置灰。

ref被用来内给元素容或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件。

<divid="app">
<buttonref="mybutton"type="primary"@click="save">保存</button>
</div>
<script>
newVue({
el:"#app",
data:{
},
methods:{
save(){
this.$refs.mybutton.disabled=true;
}
}
})
</script>
<style>
:disabled{
border:1pxsolid#DDD;
background-color:#F5F5F5;
color:#ACA899;
}
</style>

㈣ JS限制点击事件的频率怎么实现

比如:五秒只能点击一次?

思路:设置一个标记。

varflag=true;
div.addEventListener('click',function(){
if(flag){
alert('点击事件执行');
flag=false;
setTimeout('flag=true',5000);
}else{
console.log('点击事件不执行');
}
})

点击事件执行条件,flag为真。执行之前判断是否为真,执行之后,flag赋值为false,再紧跟一个定时器,设定五秒后给flag赋值为真。

㈤ js怎么防止重复点击

1.防止重复点击可以添加标记,第一次点击后变为false,每次点击判断这个标记是true才执行

2.如果是按钮防止重复点击,可以再按钮点击后,给按钮添加disabled属性,按钮就再也点击不了

举个例子:

<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<buttononclick="fn()">方式一</button>
<buttononclick="alert('只会出现一次哦,之后想点都点不了');this.disabled=true;">方式二</button>
<body>
<script>
//第一种方式
varflag=true;
functionfn(){
if(flag){
flag=false;
alert('只会出现一次哦');
}
}

</script>

</body>
</html>
阅读全文

与js避免频繁点击相关的资料

热点内容
ps入门必备文件 浏览:348
以前的相亲网站怎么没有了 浏览:15
苹果6耳机听歌有滋滋声 浏览:768
怎么彻底删除linux文件 浏览:379
编程中字体的颜色是什么意思 浏览:534
网站关键词多少个字符 浏览:917
汇川am系列用什么编程 浏览:41
笔记本win10我的电脑在哪里打开摄像头 浏览:827
医院单位基本工资去哪个app查询 浏览:18
css源码应该用什么文件 浏览:915
编程ts是什么意思呢 浏览:509
c盘cad占用空间的文件 浏览:89
不锈钢大小头模具如何编程 浏览:972
什么格式的配置文件比较主流 浏览:984
增加目录word 浏览:5
提取不相邻两列数据如何做图表 浏览:45
r9s支持的网络制式 浏览:633
什么是提交事务的编程 浏览:237
win10打字卡住 浏览:774
linux普通用户关机 浏览:114

友情链接