JS优化常用片断
防抖debounce装饰器
在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
function debounce(func, delay) {
let isCooldown = false;
return function() {
if (isCooldown) return;
func.apply(this, arguments);
isCooldown = true;
setTimeout(() => isCooldown = false, delay);
};
}
节流throttle装饰器
规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
function throttle(func, delay) { let isThrottled = false,
savedArgs,
savedThis; function wrapper() { if (isThrottled) { // (2)
savedArgs = arguments;
savedThis = this;
return;
} func.apply(this, arguments); // (1) isThrottled = true; setTimeout(function() {
isThrottled = false; // (3)
if (savedArgs) {
wrapper.apply(savedThis, savedArgs);
savedArgs = savedThis = null;
}
}, delay);
} return wrapper;
}
2者区别:
- 函数防抖和函数节流都是防止某一时间频繁触发,但是这两兄弟之间的原理却不一样。
- 函数防抖是某一段时间内只执行一次,而函数节流是间隔时间执行。
应用场景:
- debounce
- search搜索联想,用户在不断输入值时,用防抖来节约请求资源。
- window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次。
- throttle
- 鼠标不断点击触发,mousedown(单位时间内只触发一次)。
- 监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断。
参考文档:
JS优化常用片断的更多相关文章
- 前端js优化方案(连续更新)
最近在读<高性能javascript>,在这里记录一下读后的一些感受,顺便加上自己的一些理解,如果有兴趣的话可以关注的我的博客http://www.bloggeng.com/,我会不定期发 ...
- 前端js优化方案(一)
最近在读<高性能javascript>,在这里记录一下读后的一些感受,顺便加上自己的一些理解,如果有兴趣的话可以关注的我的博客http://www.bloggeng.com/,我会不定期发 ...
- JavaScript性能优化篇js优化
JavaScript性能优化篇js优化 随着Ajax越来越普遍,Ajax引用的规模越来越大,Javascript代码的性能越来越显得重要,我想这就是一个很典型的例子,上面那段代码因为会被频繁使用, ...
- js中常用的操作
1.js中常用的数组操作 2.js中常用的字符串操作 3.js中常用的时间日期操作 4.定时器
- js数组常用操作方法小结(增加,删除,合并,分割等)
本文实例总结了js数组常用操作方法.分享给大家供大家参考,具体如下: var arr = [1, 2, 3, 4, 5]; //删除并返回数组中第一个元素 var theFirst = arr.shi ...
- require.js优化器
项目发布前,require.js优化器可以合并require.js各个模块. 官网: http://requirejs.org/docs/optimization.html 安装 npm instal ...
- 关于js优化和css优化
css优化: 1.css代码的压缩. 2.css文件的合并. 3.不滥用float,因为float在渲染时计算量比较大,所以尽量减少使用float. 4.避免在html标签中写style属性. js优 ...
- Node.js:常用工具util
概要:本篇博客的主要内容是介绍node.js的常用工具util. 1.util.inherits util.inherits(constructor,superConstructor)是一个实现对象间 ...
- js优化原则
首先,与其他语言不同,JS的效率很大程度是取决于JS engine的效率.除了引擎实现的优劣外,引擎自己也会为一些特殊的代码模式采取一些优化的策略.例如FF.Opera和Safari的JS引擎,都对字 ...
随机推荐
- java.lang.IllegalArgumentException,java.util.zip.ZipException 解决办法
控制台错误信息: 严重: A child container failed during start java.util.concurrent.ExecutionException: org.apac ...
- Python 读取excel指定的列
一.摘要 在这篇文章中: https://www.cnblogs.com/xiao987334176/p/9330368.html#autoid-4-5-2 介绍了使用 xlrd 模块,读取指定坐标的 ...
- git 学习笔记 -- 创建标签
在Git中打标签非常简单,首先,切换到需要打标签的分支上: $ git branch * dev master $ git checkout master Switched to branch 'ma ...
- Scala 系列(一)—— Scala 简介及开发环境配置
一.Scala简介 1.1 概念 Scala 全称为 Scalable Language,即"可伸缩的语言",之所以这样命名,是因为它的设计目标是希望伴随着用户的需求一起成长.Sc ...
- sql分页优化
索引优化 注意查询的数据占总数据达到一定量的时候可能导致索引失效.可以用limit或者指定列缩小数据区域可以解决. 以时间orderby排序的limit分页优化 前提用order by分页 limit ...
- MySQL计算相邻两行某列差值的方法
简述 博主最近因工作任务缠身,都无暇顾及到我的这片自留地了.前段时间稍有空闲,花了较多的精力学习<啊哈算法>,从中学习到很多之前没有太注重的内容,收益颇丰.但是这些算法题目还没有看完,等后 ...
- 【开发笔记】- SSM使用velocity模板语言
1.在pom.xml里添加velocity模板语言支持的依赖 <!-- velocity模板语言支持包 --> <dependency> <groupId>org. ...
- 【转载】C#中int.TryParse方法和int.Parse方法的异同之处
在C#编程过程中,int.TryParse方法和int.Parse方法都可以将字符串string转换为整型int类型,但两者还是有区别,最重要的区别在于int.TryParse方法在字符串无法转换为i ...
- Code Clean读书笔记
代码整洁之道读书笔记 by fangpc 序言部分 "神在细节之中" - 建筑师路德维希 5S哲学(精益) 整理(Seiri):搞清楚事物之所在--通过恰当地命名之类的手段--至关 ...
- mariadb远程授权问题
安装mariadb后,使用远程连接时 密码没有问题 但是每次打开都报这个错误: 这个错误是在进行远程连接的时候密码正确, 但是,进行远程授权的时候授权密码错误. 在数据库中执行下述代码即可: GRAN ...