㈠ 求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>