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

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

一般处理频繁点击有：

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这个方法，这样我们就处理了用户频繁点击的问题

前端js点击事件处理多次频繁点击问题相关推荐

对于前端js框架对于事件处理的应用场景探讨
2019独角兽企业重金招聘Python工程师标准>>> 之前看了WTD的一篇关于前端js框架对于事件处理的分析,有两种处理场景,一种是执行handlers的时候执行某一个handle ...
防止表格中的单行按钮被频繁点击，前端实例讲解~
在网页开发过程中,经常遇到按钮被频繁点击造成请求重复的问题,可以采用一个策略:设置定时器setTimeout,点击一次后让按钮灰掉(disable),暂时不可以用,一段时间后再启用. 如果只有单个按钮 ...
前端js控制点击切换效果且刷新浏览器不会重置
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.布局的部分代码和样式二.使用js来控制点击时颜色变化,点击哪一个图标,哪一个图标就应该变橙色且带有下边框 1.分 ...
前端Js框架 UI框架汇总特性适用范围选择
身为一个资深后端工程师,面对层出不穷的前端框架,总让人眼花缭乱,做一个综合解析贴,从全局着眼,让我们明白各种前端框架的应用范围,为如何选择前端框架,从不同的维度提供一些线索,做为一个长期优化贴,欢迎指 ...
前端Js框架汇总【转】
概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...
前端 js实现模糊搜索
前端 js实现模糊搜索 template <input type="text" v-model="keyWord" @input="fuzzyQ ...
WEB前端JS与UI框架
前端Js框架汇总概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人 ...
几种常用的前端js框架
概述: Web.无线.物联网.VR.PC从不同方向推进着技术的融合与微创新.程序员在不同业务场景下的角色互换.而随着node.js的出现语言的角色也在发生着转变,Js扮演了越来越重要的角色.也就有了茶 ...
web前端-JS（DOM、BOM）
web前端-JS(DOM.BOM) 1. DOM- 操作元素 1.1 获取元素 1.2 事件基础 1.3 操作元素 1.3.1 改变元素的内容 1.3.2 常见元素的属性操作 1.3.3 表单元素的属 ...

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

前端js点击事件处理多次频繁点击问题相关推荐

最新文章

热门文章