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

Half 发布于2019-08-21 16:42 / 344人阅读

摘要：归纳为两方面对服务器频繁调用客户体验优化网络问题错误提醒对服务器频繁调用对于现有的网站或普遍存在这些问题，这些问题对服务器的影响很大，对于处理复杂请求请求量过多的直接导致服务器瘫痪案例对大数据进行查询报错就上传日志大家都在点提交遇到这些问题

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

对服务器频繁调用

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

主页面
文档
测试页面

云服务器 GPU云服务器 php页面跳转的太快网站安全证书有问题如何解决 linux日志太多如何解决兼容问题?Win11仅支持1个I

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88621.html

请给公有云多些成长空间

最近公有云不够太平，在阿里云故障、AWS故障、谷歌云故障之后，腾讯云也挂了……，几大公有云频频出现故障，一时让很多上云的小伙伴们无从选择，还能有靠谱点的吗？其实，关于公有云的故障，早就引起了很多不满，一度成为人们上云的最大障碍。这些都是公有云里的大牌，市场地位显赫，技术过硬，也是不差钱的金主，但仍逃不过故障的魔掌，其它的公有云就更不用提了，只是市场份额不大，出了故障也不像这几个更受人们关注罢了。这...

jayce 2019-04-29 19:28 评论0 收藏0
来聊聊react-native应用的健康监控

监控什么今天我们来聊聊如何监控你的应用程序，这里的监控说的不是让我们去监控用户，而是监控应用的健康状态，什么是健康状态呢？对于后端的同学来说，在微服务的架构下，每个子服务是否正常工作、返回的结果是否满足预期，这些就算是健康状态，再举个例子，你的台式机，对于操作系统来说，每个硬件是否能正常的工作、工作的稳定性，这些都是需要关注的健康状态。既然我们关心健康状态，那么我们该如何衡量一个设备的健康状态...

tunny 2019-08-22 16:03 评论0 收藏0
Node.js + ELK 日志规范

摘要：日志规范一般前端开发同学，对日志其实不太敏感，毕竟前端大多数情况下，不太关心日志。本文主要梳理了目前我们团队在开发中日志方面存在的问题，以及通过统一日志规范，希望达到什么样的效果。日志格式字段日志格式统一采用，便于解析处理。nodejs 日志规范一般前端开发同学，对日志其实不太敏感，毕竟前端大多数情况下，不太关心日志。即使有，也可能调用一些第三方的统计，比如百度统计或者别的等。在 Node...

tuomao 2019-05-23 13:53 评论0 收藏0
DataX在有赞大数据平台的实践

摘要：与大数据体系交互上报运行统计数据自带了运行结果的统计数据，我们希望把这些统计数据上报到元数据系统，作为的过程元数据存储下来。基于我们的开发策略，不要把有赞元数据系统的嵌入源码，而是在之外获取，截取出打印的统计信息再上报。一、需求有赞大数据技术应用的早期，我们使用 Sqoop 作为数据同步工具，满足了 MySQL 与 Hive 之间数据同步的日常开发需求。随着公司业务发展，数据同步的场景越...

JerryWangSAP 2019-05-22 17:07 评论0 收藏0