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

热点内容
javahashmapvalues 浏览:548
鼠标选定不了文件内容是坏了么 浏览:589
打开excel标准模板文件名 浏览:798
该文件名字不包含扩展名 浏览:565
华为备份文件 浏览:368
批量删除cpp文件代码注释的工具 浏览:312
下列哪些不属于可编程逻辑器件 浏览:963
苹果6p跳屏是什么原因 浏览:383
下载文件路径是什么 浏览:852
linux下o文件多重定义 浏览:135
为什么在人多的地方没有网络 浏览:170
华为g7有多少个版本 浏览:949
实名宝app哪个好 浏览:1
微云单个文件可以传多少 浏览:843
计算机连成网络的最重要优势是 浏览:411
优盘打开后文件夹为空 浏览:495
实时数据写入量大如何优化 浏览:76
哪里能学程序编程 浏览:647
微信里面的文件储存在哪个目录 浏览:745
高仿苹果5s屏幕显示清楚吗 浏览:897

友情链接