前端js点击事件处理多次频繁点击问题

最新推荐文章于 2022-04-12 00:45:30 发布
最新推荐文章于 2022-04-12 00:45:30 发布
阅读量1.2w 收藏 5
点赞数 1
分类专栏： html js 效果 前端 文章标签： 小程序vue react angular 多次点击 频繁点击 js处理多次点击 前端处理频繁点击
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42794365/article/details/85328274
版权
前端 同时被 3 个专栏收录
4 篇文章 0 订阅
订阅专栏
html
3 篇文章 0 订阅
订阅专栏
效果
3 篇文章 0 订阅
订阅专栏

在开发中有时候我们有一个点击请求事件，如果操作者一直快速点击就会一直请求，造成资源浪费为此我们一般要进行处理防止用户频繁点击

一般处理频繁点击有：

1.显示隐藏

2.通过时间间隔进行判断

3.使用节流处理

此次使用第三种如果想了解前两种可进行搜索查询

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <button class="btn1" type="button">点击</button>
    <script>
        window.onload = function() {
            var isFrist = true // 是不是第一次点击
            function delBtn() {
                console.log('用户处理事件')
            }
            var throttle = function(method, context){
              clearTimeout(method.tId);
              method.tId = setTimeout(function(){
                method.call(context);
              }, 300);
            }
            let btnDom = document.querySelector('.btn1')
            btnDom.οnclick=function() {
                if (isFrist) {
                    // 如果是第一次点击直接执行相关请求
                    delBtn()
                    isFrist = false
                }else {
                    // 如果不是第一次点击进行节流
                    throttle(delBtn)
                }
                
            }
        }
    </script>
</body>
</html>

节流的主要方法就是throttle这个函数每隔300毫秒执行一次delBtn这个方法，这样我们就处理了用户频繁点击的问题

feiyue1010
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JavaScript - 你知道用户快速连续点击，造成多次提交数据该如何解决吗
xingyu_qie的专栏
04-07 116
点击按钮提交数据，在项目开发中已经是一个再普通不过的需求功能了，它是那么普通，甚至在需求文档中经常会被一笔带过。但就是这样一个平凡的功能，bug列表里还是时常会有它的身影。伴随的问题就是正常情况下，单次点击没有问题，但如果被快速多次点击，就会发送多次请求，造成多次提交数据的问题。那么都有哪些办法可以解决这个问题呢，我们一起来看一下。
解决layer.confirm快速点击会重复触发事件的问题
10-16
在JavaScript编程中，有时我们可能会遇到用户界面中的某些交互元素，如`layer.confirm`弹窗，在用户快速点击时，导致事件被重复触发的问题。这在实际应用中可能会引发一系列问题，比如频繁向后端发送请求，进而导致...
一个按钮，如果5分钟内点击再次点击给予提示操作频繁，在JS里可以这样写
weixin_33928467的博客
07-07 601
很简单。 但是，如果你要离开这个页面再进来， 就没办法限制了。 除非用cookie 储存状态 给个示例 var isLock = flase; //定义全局变量 按钮点击事件: if(isLock){ alert(“操作频繁”); return fasle;} // 按钮逻辑 ,,,,,, // do somethings //按钮逻辑end ....isLock = true;s...
某些error page不加载_web前端重复请求，不存在的！
weixin_39587164的博客
12-03 165
前言某一天，老大突然把我叫到座位，指着屏幕。我一看，运维群，惊了！难道有事故，有bug！？情况是钱包系统数据有异常，后台同事查证同一笔手工批量充值发起了两次，怀疑可能是前端没有控制好，重复发起了批量充值请求。吓的我赶紧检查相关代码，发现在前端“点击按钮之后会有弹窗二次提醒用户是否操作”。那肯定就不是我的锅了。如果没有弹窗二次确认，那在界面上不小心点击多次，真的就会发起多次请求，说不定第二天就要去财...
前端多次点击button_前端防止按钮被多次点击
weixin_31198993的博客
01-17 859
前端的部分逻辑有时候控制前端的显示，比如记录收藏数目等等。有时候多次重复点击会造成前端显示的bug。所以需要有部分逻辑判断去筛除掉重复多次的点击。实现部分代码如下，主要是通过setTimeout去加以判断，即无论点击几次，间隔一定时间才会去触发一次事件，从而只产生一次的记录：var i=0; //判断点击次数寄存var closetimer = null; //延时函数寄存function B...
js解决按钮被多次点击的问题（微信支付-支付提交）
泡泡菜叶的博客
08-15 5917
下面是我在微信支付项目中遇到的一个致命的问题以及解决的方法，希望大家给出宝贵的意见。问题 在微信网页支付过程中，当多次点击“立即支付”的按钮，会跳出多个微信支付的界面，用户必须依次关闭各个界面，还会出现手机卡死的现象，这无疑是一个致命的问题，严重影响用户的体验。 解决方法 在这里我使用的方法是：采用标志来判断，每次点击都要对这个标志进行判断。一段时间后对标志进行复位。具体的代码如下： <a id
JavaScript中短时间高频次触发事件的优化
xiaoxijinger的博客
06-29 540
在浏览器中，如果在短时间内多次触发可以改变DOM树结构的事件，可能导致页面机构出现混乱甚至浏览器的崩溃。最近在做项目中，我无意中遇到一个问题，当滚到条到达某个高度时，使相应的元素从无到有，但是每次刷新页面后第一次到达时，鼠标滚轮都会停顿下来，经过询问老师和上网搜索，发现是监听滚动条事件造成的，因为滚动条动了一点，就会触发很多次监听事件，而且时间是极短的;所以就会造成浏览器也来不及反应，要卡在那一会。 后来我总结了几种解决方法。 一、函数节流 通过函数阻止相同的时间在较短 时间连续触发 这里通过200ms的延
关于javascript中限定时间内防止按钮重复点击的思路详解
10-21
思路一的解绑和重新绑定操作简洁明了，但可能涉及到更多的事件处理逻辑；思路二则通过比较时间差来控制，减少了对事件处理的直接干预，但在处理大量并发点击时可能不如思路一直观。在实际应用中，可以根据具体需求和...
网站前端性能优化之javascript和css篇
09-22
减少计算次数的方法是使用一次性表达式或通过JavaScript事件句柄来实现动态更新，以减轻页面负担。 第三点提倡使用外部JavaScript和CSS文件。虽然这会增加HTTP请求，但外部文件可以被浏览器缓存，从而在后续页面...
Moment.js实现多个同时倒计时
10-16
在JavaScript开发中，有时我们需要实现多个倒计时功能，例如显示不同事件的剩余时间。`Moment.js`是一个非常流行的日期和时间处理库，它提供了丰富的API来处理日期和时间的各种操作，包括创建、比较、格式化等。在这...
纯前端首屏优化1
08-08
在DOM操作上，应尽量减少对DOM的频繁修改，避免循环查找和逐个更改元素，而是使用`innerHTML`一次性更新整个结构，减少重绘成本。同时，保持CSS的高效复用和良好的命名规范，减小样式文件大小，保证JS逻辑清晰，避免...
js防止重复点击或者点击过快方法
wbj16116的博客
10-23 315
<script> var isClick = true; $("button").on("click",function(){ if(isClick) { isClick = false; //执行你的逻辑 //定时器 setTimeout(function() { isClick = true; }, 1000);//一秒...
js监听鼠标事件，完成超自动退出
ydd100100的博客
10-13 809
前端js部分： 思路：设置一个初始时间，监听鼠标事件，如果鼠标有事件，初始值不变，否则间隔1s减少初始值，当初始值小于0的时候，调用后端登出即可 //监听操作 var sessiontime;//这个值是自定的时间，可存数据库，也可自定义 var maxTime; // seconds if (sessiontime == null) { maxTime = 30 * 60; }else{
JS中单击多次执行一次的问题
chd_sun的博客
10-16 1394
在对日的一个项目之中遇到一个要求，多次点击按键只执行一次的问题 下面是一个ajax的方法 点击之后变成 执行之后又恢复到可用状态 代码如下：只是个例子 //lockTarget: '#G707_cmd_Kensaku'　通过id选择器锁住的你需要的控件（这里锁住了检索的控件） AjaxClient.post(countUrl, form,{lockTarget: '#G707_cmd_Ken...
按钮频繁点击处理
c_Yuan的博客
11-12 1114
我们经常会在网站上面看到，当一个按钮被多次点击之后，提示系统频繁，并且在一段时间之后，才能再次点击。其实这对于js的实现来说非常简单，仅仅需要用到定时器。这里有一个点是非常重要的，当window.setTimeout 的时间设置过长时，因人在点击一个按钮时间过快，可能导致 setout() 事件调用多次。因此，这个时间一定要设置在200-- 300 ms 。
前端页面闪烁的问题解决方案
热门推荐
马优晨
07-19 2万+
平时遇见使用VUE遇见页面闪烁的问题，总结了三点希望对以后大家开发有帮助：遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ), 或者是模块(div)的闪烁。对于这个问题由于JavaScript去操作DOM，都会等待DOM加载完成（DOM ready）。 对于vuejs、angularjs这些会在DOM ready完会才回去解析html view Template
操作栏里面按钮太多处理
weixin_43167662的博客
10-13 649
效果展示 代码（使用两个div进行包裹） 样式
前端多次点击button_【转】前端vue中防止用户在短时间内频繁多次点击按钮
weixin_39692761的博客
01-14 598
介绍两种vue项目中防止用户在一定时间内频繁点击按钮触发事件的方法第一种方法：在规定时间内将按钮禁用的方法主要思想就是禁止用户在一定的时间多次点击，在一定时间内将按钮禁用，用定时器实现，一定时间之后用户可再次点击第二种方法：用指令的方式实现，全局注册，方便新建js文件(因为是全局可用的，文件可以叫preventRepeatClick.js，我这里是叫index.js)代码如下：export def...
前端页面开发的时候遇到一个表单处理按钮的情况
Rocky
04-12 714
当遇到一个表单处理两个按钮的时候。Thymeleaf一种形式的多个提交按钮 <form action="#" data-th-action="@{/action/edit}" data-th-object="${model}" method="post"> <button type="submit" name="action" value="save">save</button> <button type="submit" name="action"
前端防止用户重复提交-js
最新发布
05-24
前端可以通过以下几种方式防止用户重复提交： 1. 禁用提交按钮：在表单被提交后，立即禁用提交按钮，防止用户多次点击提交按钮。可以通过以下代码实现： ```javascript document.querySelector('form').addEventListener('submit', function(event) { event.preventDefault(); document.querySelector('button[type="submit"]').setAttribute('disabled', true); // ... }); ``` 2. 显示加载动画：在表单被提交后，显示一个加载动画来提示用户正在处理请求，防止用户多次点击提交按钮。可以通过以下代码实现： ```javascript document.querySelector('form').addEventListener('submit', function(event) { event.preventDefault(); document.querySelector('.loading').style.display = 'block'; // ... }); ``` 3. 防抖函数：在用户频繁点击提交按钮时，使用防抖函数延迟请求的发送。可以通过以下代码实现： ```javascript function debounce(fn, delay) { let timer; return function() { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, arguments); }, delay); } } const submitForm = debounce(function() { document.querySelector('form').submit(); }, 1000); document.querySelector('button[type="submit"]').addEventListener('click', function(event) { event.preventDefault(); submitForm(); }); ``` 以上是前端防止用户重复提交的一些方法，但这些方法只是针对前端的处理，为了保证数据的安全和正确性，后端也需要进行相应的处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值