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

最新推荐文章于 2024-06-11 16:10:49 发布

feiyue1010

最新推荐文章于 2024-06-11 16:10:49 发布

阅读量1.2w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html js 效果前端文章标签：小程序vue react angular 多次点击频繁点击 js处理多次点击前端处理频繁点击

本文链接：https://blog.youkuaiyun.com/weixin_42794365/article/details/85328274

前端同时被 3 个专栏收录

4 篇文章

订阅专栏

html

3 篇文章

订阅专栏

效果

3 篇文章

订阅专栏

本文介绍了一种使用节流技术防止用户频繁点击按钮的方法，通过设置300毫秒的延迟来限制请求频率，有效避免资源浪费。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

一般处理频繁点击有：

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.onclick=function() {
               if (isFrist) {
                   // 如果是第一次点击直接执行相关请求
                   delBtn()
                   isFrist = false
               }else {
                   // 如果不是第一次点击进行节流
                   throttle(delBtn)
               }

           }
       }
   </script>
</body>
</html>