【性能优化】前置后置节流防抖,防止不避免情况下重复触发

 本文主要记录分享下 性能优化 中在 不可避免 情况下重复请求或者重复调用方法下的前置后置 节流防抖 的处理方式,以下为js版本其他语言可以 参考 类似。优化效果 以下是优化前后对比截图。优化前优化后优化方法 主要分享一下两种方式前置和后置前置节流防抖 /** * 前置节流防抖 * @param func * @param delay * @returns {function(): *} */ window.beforeThrottle = function (func, delay) { let lastCall = 0; return function () { const now = Date.now(); if (now - lastCall < delay) { return; } lastCall = now; retur...

前端,解决方案,其他 2024-04-07 AM 41次 0条

利用js焦点事件实现用户离开页面提示

 利用js 焦点事件 实现用户 切换网站提示 主要使用了原生 javascript 的 onfocus 事件以及 onblur 事件来实现的。效果预览实现代码window.onfocus = function() { document.title = '大爷来玩呀'; }; window.onblur = function() { document.title = '大爷慢走,下次再来'; };焦点事件 焦点事件 onfocus 与 onblur 执行相反。onfocus 事件 当输入字段或者窗体获得焦点时执行 JavaScript 脚本window.onfocus = function() { document.title = '大爷来玩呀'; };object.onfocus = function(){myScript};object.onfocus = function(){myScript};onblur 事件 当用户离开输入字段或者窗体时执行 JavaScript 脚本window.onblur = function() { documen...

前端 2022-01-08 PM 688次 0条

解决无法加载源映射: 无法加载xxxx.map 的内容:HTTP 错误: 状态代码 404

 当我们引用压缩过的 min.css 或者 min.js 文件时有些时候浏览器会报一下异常导致无法使用。无法加载源映射异常问题DevTools 无法加载源映射: 无法加载http://192.168.146.128:9900/assets/css/skins/skin-black-blue.css.map 的内容:HTTP 错误: 状态代码 404,net::ERR_HTTP_RESPONSE_CODE_FAILURE DevTools 无法加载源映射: 无法加载http://192.168.146.128:9900/assets/js/require.min.js.map 的内容:HTTP 错误: 状态代码 404,net::ERR_HTTP_RESPONSE_CODE_FAILURE DevTools 无法加载源映射: 无法加载http://192.168.146.128:9900/assets/css/skins/skin-black-blue.css.map 的内容:HTTP 错误: 状态代码 404,net::ERR_HTTP_RESPONSE_CODE_FAILU...

前端,解决方案 2021-12-08 AM 8390次 0条

js获取当前网页加载状态

 有时候我们为了更好的 用户体验 通常 UI页面 设计时会在页面上展示内容 加载状态 ,这个时候我们可以通过一下 js前端代码 来实现当前网页 加载状态 。onreadystatechange 事件简单应用/*判断当前页面加载状态*/ document.onreadystatechange=function () { //获取当前网页状态 switch (document.readyState) { case "loading": //正在加载 console.log("正在加载"); break; case "interactive": //结构加载完成 console.log("结构加载完成"); break; case "complete": //全部加载完成 console.log("全部加载完成"); break; ...

前端,解决方案 2021-10-08 PM 475次 0条

使用bootstrap-table插件,设置显示隐藏列时,设置保存至cookie或者服务器

 扩展 bootstrap-table 插件,原插件设置显示/隐藏列时只是临时的,也有 cookie 插件保存设置,但不方便保存到服务器,本插件就是对其进行扩展,默认保存至 cookie ,提供事件和参数可以将设置保存至服务器。 bootstrap 依赖bootstrap-table.jsBootstrap Table旨在减少开发时间,并且不需要开发人员的特定知识。它既轻量级又功能丰富jquery.cookie.min.jsjQuery 可以通过 jquery.cookie.js 插件来操作 Cookiebootstrap-table 使用方法 使用 bootstrap-table 插件的 bootstrapTable 方法进行初始化时,传参数 maintainColSwitch:true 即可开启保存到 cookie 的功能。$('#dataGrid').bootstrapTable({ url: 'demo.response.json', method: 'get', sidePagination: 'client'...

前端 2021-10-08 AM 470次 0条