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

热点内容
苹果机安卓 浏览:367
百度地图js双击事件监听 浏览:953
c程序中怎么移动光标 浏览:955
无法从googleplay下载更多文件 浏览:13
苹果手机qq里面的视频怎么看 浏览:627
机密文件多少件按泄密处理 浏览:745
编译linux 浏览:666
macbookpro2011拆机教程 浏览:675
eclipse代码补全快捷键 浏览:873
电脑编程序的软件有哪些 浏览:80
海贼王漫画哪个网站 浏览:42
剑灵苹果系统错误 浏览:707
苹果5前置摄像头旁边是什么孔 浏览:51
officeaccess数据库 浏览:47
打印文件右边显示带格式的 浏览:66
老版本仙剑传奇 浏览:232
linux命令大全百度云 浏览:328
5s如何备份程序到6s上 浏览:552
管家婆打开数据库失败 浏览:490
宁波编程考级是学什么的 浏览:654

友情链接