js性能优化之函数节流(分流函数)
2023-09-11 14:15:30 时间
函数节流的原理
比如我们在window.onresize事件中要打印当前浏览器窗口的大小,在我们通过拖拽来改变窗口大小时候,打印窗口大小这个工作1s就运行了10次。而实际上我们只需要2次或者3次。
比如这行代码
window.onresize = function() { console.log(1); }
分流函数实现的思路
实现的思路就是将即将被执行的函数用setTimeout延迟一段时间再执行。如果该次执行还没有完成,则忽略下面调用该函数的请求。
因此这个节流函数有两个参数,一个是需要被执行的函数,另一个是延迟的时间
var throttle = function(fn, interval) { var _self = fn, timer, firstTime = true; return function() { var args = arguments, _me = this; //如果是第一次调用不需要延迟执行 if (firstTime) { _self.apply(_me, args); return firstTime = false; } if (timer) { return false; } timer = setTimeout(function() { clearTimeout(timer); timer = null; _self.apply(_me, args); }, interval || 500) } }
.
相关文章
- JS框架_(JQuery.js)纯css3进度条动画
- JS框架_(JQuery.js)高德地图api
- JS框架_(JQuery.js)Tooltip弹出式按钮插件
- JS框架_(Esign.js)仿信用卡电子签名特效
- JS框架_(JQuery.js)点赞按钮动画
- JS框架_(JQuery.js)上传进度条
- C# 对JS编码/解码进行转换
- js延迟加载的性能优化
- 原生JS实现轮播
- clipboard.js文本复制到剪贴板的现代方法
- [Nuxt] Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates
- [Immutable.js] Working with Subsets of an Immutable.js Map()
- [Node.js] Level 5. Express
- js 性能优化利器:prepack
- Js apply方法详解
- SAP Spartacus 启动时 Chrome 里观察到的 product.js
- Atitit 搜索蓝牙设备 powershell的实现 java noede.js python 先用脚本语言python nodejs,不好实现。。Java 也不好实现。。 Netcore可以,
- Atitit 模块打包器(module bundler)的概念与使用 目录 1. 解决问题1 1.1. 多js合并方便性能加载1 1.2. 静态模块打包2 1.3. 动态模块打包2 2. 最
- Atitit 研发体系 codelib 代码库的建设 目录 1. 概念与组成2 1.1. Java代码2 1.2. Js代码2 1.3. H5 代码 js+css+htm+txt2 1.4.
- Atitit. servlet 与 IHttpHandler ashx listen 和HttpModule的区别与联系 原理理论 架构设计 实现机制 java php c#.net js javascript c++ python
- Atitit. Java script 多重多重catch语句的实现and Javascript js 异常机制
- 华为OD机试 - 投篮大赛(Java & JS & Python)
- 把elementui 里的message 消息提示内容换行显示+弹框一直显示不消失+修改弹框位置+可以手动关闭消息提示框(把js字符串按照分号换行)
- IT:前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/中后台/体验管理等)之详细攻略
- JS:性能优化方案:lodash防抖debounce和节流throttle
- (效果三)js实现选项卡切换
- JS中require函数的警告提示
- 【JS高级】js之闭包对象_04
- 【JS高级】js之函数、重载、匿名函数、作用域及作用域链_03
- 文字、图片左右无缝滚动效果--支持拖拽js效果demo效果示例(整理)
- 【JS面向对象编程常用方法】
- JS自定义编码和解码方案
- JS工具方法 3 js客户端与php服务器通信加密之AES