[前端问题]按钮点的太快、日志打的太多、客户网络不明等 - 如何解决

归纳为两方面： 对服务器频繁调用、客户体验优化(网络问题/错误提醒)

对服务器频繁调用

对于现有的网站或webapp普遍存在这些问题，这些问题对服务器的影响很大，对于处理复杂请求、请求量过多的直接导致服务器瘫痪

案例：

• 对大数据进行查询
• 报错就上传日志
• 大家都在点提交
• ...

遇到这些问题，程序员比较头疼，可能很多人意识到了问题，但却不好解决，原因是会造成业务代码混乱、测试难度较大、容易出bug等

客户体验优化(网络问题/错误提醒)

主要是围绕网络问题、错误提醒所要体现的客户体验优化
案例：

• 客户网络不明，无法排查网络问题
• 相同错误不要频繁提醒客户
• ...

如何解决

推荐 js-trigger，js-trigger是一个JavaScript触发器插件，可通过指定频次、指定时间内触发指定的处理函数

• 支持UMD(AMD/CMD/CommonJS/ESModule)
• 支持Node
• 支持Browser
• 使用场景：限制日志频繁上传、限制ajax频繁调用、错误提醒、网络状态检测等

js-trigger 案例

三种引入方式

import Trigger from 'js-trigger'; //ES6引入

var Trigger = require('js-trigger').default; //ES5引入

window.Trigger; //browser引入

案例1：限制查询按钮频次，条件是3s内最多发一次请求

//创建一个触发器
var trigger = Trigger.create({
    name: '限制查询频繁调用',
    //frequency: 5, //点击5次触发
    interval: 3,    //点击超过3s触发，3s内不触发
    firstTrigger: true   //首次立刻触发
});
var btnQuery = $('#btnQuery');
/**
 * 触发器监听事件处理函数
 * @param {Object} state - 当前状态
 * @param {number} handlerCounter - 触发次数统计
 * @param {Date} startTime - 开始时间
 * @param {Date} endTime - 结束时间
 * @param {number} duration - 持续时长(ms)
 * @param {Object[]} data - 追加数据，每次check进行传入
 */
trigger.on(function(state){
   $.get("查询数据api接口", function(res){
      //do something
   });
});

//点击查询事件
btnQuery.click(function(ev){
  //检查触发器，条件成立会即可触发处理函数
  trigger.check('每次check传入的数据');
});

案例2：上传客户网络数据，条件是30s内或执行10次内最多上传一次数据且最多触发10次

//创建一个触发器
var trigger = Trigger.create({
    interval: 30,    //超过30s触发
    frequency: 10,   //点击10次触发
    maxHandlerFrequency: 10,  //最多触发10次
    firstTrigger: true   //首次立刻触发
});

/**
 * 触发器监听事件处理函数
 * @param {Object} state - 当前状态
 * @param {number} handlerCounter - 触发次数统计
 * @param {Date} startTime - 开始时间
 * @param {Date} endTime - 结束时间
 * @param {number} duration - 持续时长(ms)
 * @param {Object[]} data - 追加数据，每次check进行传入
 */
trigger.on(function(state){
   //do something
});

//每秒检测网络
setTimeout(function(){
    //检测网络
    checkNetwork(function(data){
      //检查触发器，条件成立会即可触发处理函数
      trigger.check();
    });   
}, 1000);

js-trigger相关地址

主页面
文档
测试页面