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

Tango

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

对服务器频繁调用

对于现有的网站或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相关地址

主页面
文档
测试页面

阅读 2k
8 声望
0 粉丝
0 条评论
8 声望
0 粉丝
文章目录
宣传栏