导航:首页 > 编程语言 > 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避免频繁点击相关的资料

热点内容
怎么查看excel最近保存文件 浏览:636
keil链接时找不到指定文件 浏览:651
qq文件怎么传到微信里 浏览:514
cad导出pdf样式文件 浏览:918
y400怎么升级win10 浏览:42
怎么登录移动屏蔽的网站 浏览:849
电商运营每天都看到什么数据 浏览:191
iphone熊猫看书目录 浏览:754
TPL丨NK14A4网络密码是多 浏览:65
u盘启动后怎么查看桌面的文件 浏览:80
哈罗单车app和支付宝包月哪个便宜 浏览:635
织梦cms网站模板 浏览:410
有没有什么免费看国漫的网站 浏览:213
如何用机算计编程 浏览:401
大学计算机程序设计题 浏览:521
win10安全模式也蓝屏 浏览:548
满分率体现数据的什么状况 浏览:870
数控混合编程应注意什么 浏览:949
文件夹色纸 浏览:445
央视影音532版本 浏览:358

友情链接