js防止多次点击

⑴ 怎样使js中的onclick事件只触发一次,就是我点击了一次，再次点击的时候不让其再触发

解决的方法：

1、用jQuery的方式

jQuery专门为此功能提供了一个函数one。这样写就能让click这个事件只执行一次。

$("#btn3").one('click',function(){

alert('jQuey的one函数，第1次点击');

});

(1)js防止多次点击扩展阅读：

jQuery的模块可以分为3部分：入口模块、底层支持模块和功能模块。

在构造jQuery对象模块中，如果在调用构造函数jQuery()创建jQuery对象时传入了选择器表达式，则会调用选择器Sizzle遍历文档，查找与之匹配的DOM元素，并创建一个包含了这些DOM元素引用的jQuery对象。

浏览器功能测试模块提供了针对不同浏览器功能和bug的测试结果，其他模块则基于这些测试结果来解决浏览器之间的兼容性问题。

在底层支持模块中，回调函数列表模块用于增强对回调函数的管理，支持添加、移除、触发、锁定、禁用回调函数等功能；

异步队列模块用于解耦异步任务和回调函数，它在回调函数列表的基础上为回调函数增加了状态，并提供了多个回调函数列表，支持传播任意同步或异步回调函数的成功或失败状态；

数据缓存模块用于为DOM元素和javascript对象附加任意类型的数据；队列模块用于管理一组函数，支持函数的入队和出队操作，并确保函数按顺序执行，它基于数据缓存模块实现。

⑵ Html js禁止整个页面所有点击

Htmljs禁止整个页面所有点击可以添加标记,第一次点击后变为false,每次点击判断这个标记是true才执行。
如果是按钮防止重复点击，可以再按钮点击后，给按钮添加disabled属性。
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。

⑶ js怎么避免click短时间的多次执行

比如楼下说的方法，可以设置变量来，或者再标签上加自己定义属性，示例如下：

<inputtype="button"value="测试"state="0"id="btn"/>
<scripttype="text/javascript">
//JS的做法,当然下面的也可以把点击时间做成函数，然后添加到空间上面
document.getElementById("btn").onclick=function(){
//获取按钮点击状态
vars=this.getAttribute("state");
if(s=='1'){
alert("系统处理中，请不要重复点击！");
}else{
//设置点击状态，执行业务逻辑，设置处理中
this.setAttribute("state","1")
}
//下方写你的其他代码

this.setAttribute("state","0");//设置点击状态，执行完成清空点击
}
//jQuery的做法
$("#btn").click(function(){
//获取按钮点击状态
vars=$(this).attr("state");
if(s=='1'){
alert("系统处理中，请不要重复点击！");
}else{
//设置点击状态，执行业务逻辑，设置处理中
$(this).attr("state","1")
}
//下方写你的其他代码

$(this).attr("state","0");//设置点击状态，执行完成清空点击
});
</script>

⑷ 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,分号用的有些乱。

⑸ Js中防抖和节流的区别，论如何避免重复点击

在进行窗口的resize、scroll，输入框内容校验，防止按钮重复点击等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，体验糟糕。所以可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。
我们一起先来看看防抖和节流的区别

防抖函数 debounce

节流函数 throttle

如何调用

防抖和节流都利用了闭包，首先就调用了debounce和debounce方法，把内部的方法返回出去，下次自己执行，以后有时间我再写一下闭包吧，所以我还留下一个问题，这样会不会造成内存泄漏？

⑹ 前端js防止用户恶意操作，重复点击按钮事件

前几天遇到了一个关于前端重复点击事件问题，防止用户恶意操作，重复点击按钮事件，有二个逻辑解决此问题：

1.

2.定义变量保存每次点击的时间，上次和当前次点击的时间间隔小于某个时间，就return掉，否则就继续之后步骤，类似于

this.state={ clickTime:new Date().getTime()}

  buyCard(){ 

   var {clickTime} =this.state;

    var nowTime = new Date().getTime();

     if( clickTime != 'undefined'&& (nowTime - clickTime < 500)){

               return false;

     }else{

        this.setSate({clickTime:nowTime})

        .....

     }       

}