javascript基础系列 之 页面按钮问题分析

为什么需要防抖

• 当我们在页面进行按钮点击操作时，由于速度较快的点击，提交数据时，提交多次，会导致数据库数据重复。
• 当我们点击按查询时，由于接口过慢，页面无反应，导致多次点击查询按钮场景

防抖能解决什么问题

• 防抖函数解决页面按钮在连续出发多次情况下仅执行一次

相对于上述两种场景是否能解决问题，可以解决部分

原因分析：按钮实现方式不统一

• div 实现
• dx-icon
• input type=button
• svg ……

解决方案

• 防抖函数（封装一个公共函数）

   function debounce(func, wait) {
   let timeout;
   return function () {
     if(timeout) clearTimeout(timeout);
     timeout = setTimeout(func, wait)
   }
  }
  

  优点：封装一个公共函数，往每个按钮的点击事件里加就行了 缺点：这种情况有个问题就是在业务复杂的场景下，时间设置会比较棘手，如果时间设置短了，接口请求慢，用户多次点击还会出现问题，如果时间设置长了，体验变差了

• 设置按钮是否可点击(设置按钮的 disabled 相关属性，按钮点击后设置禁用效果，业务代码执行结束后取消禁用)

    disabled = true
    disabled = false
  

  优点：原生按钮和使用的UI库的按钮设置简单 缺点： div, icon, svg 这种自定义的按钮的需要单独处理效果，比较麻烦

• 在请求拦截其中添加统一 loading(例如：我们在axios的请求和响应拦截器中添加显示、隐藏loading) 优点：直接在一个地方设置就行了，不用去业务代码里一个个加 缺点： 项目中的接口涉及多个部门的接口，不同部门的规范命名不一样，没有统一的标准，在实际的业务场景中，一个按钮的行为可能触发了多个请求，因此这个方案不适合当前的项目(存在老旧项目)

• 添加全局自定义 loading组件， 按钮点击触发loading效果，业务执行结束隐藏 优点： 这种方式很好的解决了问题，由于 loading 有遮罩层还避免了用户点击某提交按钮后，接口响应慢，这时候去点击了别的操作按钮的情况 缺点：需要在业务按钮提交的地方一个一个添加

  总结：并不是防抖能解决所有场景，具体场景还要根据具体业务进行衡量取舍。希望此次分析对打架有帮助，同时如果有缺失场景欢迎大佬们留言告知，将一一补充进文档，供更多人学习。赠人玫瑰，手有余香。下边是个人公众号，欢迎关注，共同学习