[前端問題]按鈕點的太快、日志打的太多、客戶網絡不明等 - 如何解決

Half 發布于2019-08-21 16:42 / 408人閱讀

摘要：歸納為兩方面對服務器頻繁調用客戶體驗優化網絡問題錯誤提醒對服務器頻繁調用對于現有的網站或普遍存在這些問題，這些問題對服務器的影響很大，對于處理復雜請求請求量過多的直接導致服務器癱瘓案例對大數據進行查詢報錯就上傳日志大家都在點提交遇到這些問題

歸納為兩方面：對服務器頻繁調用、客戶體驗優化(網絡問題/錯誤提醒)

對服務器頻繁調用

對于現有的網站或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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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