防抖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来判断。

参考文档:

装饰和转发,call/apply

7分钟理解JS的节流、防抖及使用场景

JS优化常用片断的更多相关文章

  1. 前端js优化方案(连续更新)

    最近在读<高性能javascript>,在这里记录一下读后的一些感受,顺便加上自己的一些理解,如果有兴趣的话可以关注的我的博客http://www.bloggeng.com/,我会不定期发 ...

  2. 前端js优化方案(一)

    最近在读<高性能javascript>,在这里记录一下读后的一些感受,顺便加上自己的一些理解,如果有兴趣的话可以关注的我的博客http://www.bloggeng.com/,我会不定期发 ...

  3. JavaScript性能优化篇js优化

    JavaScript性能优化篇js优化   随着Ajax越来越普遍,Ajax引用的规模越来越大,Javascript代码的性能越来越显得重要,我想这就是一个很典型的例子,上面那段代码因为会被频繁使用, ...

  4. js中常用的操作

    1.js中常用的数组操作 2.js中常用的字符串操作 3.js中常用的时间日期操作 4.定时器

  5. js数组常用操作方法小结(增加,删除,合并,分割等)

    本文实例总结了js数组常用操作方法.分享给大家供大家参考,具体如下: var arr = [1, 2, 3, 4, 5]; //删除并返回数组中第一个元素 var theFirst = arr.shi ...

  6. require.js优化器

    项目发布前,require.js优化器可以合并require.js各个模块. 官网: http://requirejs.org/docs/optimization.html 安装 npm instal ...

  7. 关于js优化和css优化

    css优化: 1.css代码的压缩. 2.css文件的合并. 3.不滥用float,因为float在渲染时计算量比较大,所以尽量减少使用float. 4.避免在html标签中写style属性. js优 ...

  8. Node.js:常用工具util

    概要:本篇博客的主要内容是介绍node.js的常用工具util. 1.util.inherits util.inherits(constructor,superConstructor)是一个实现对象间 ...

  9. js优化原则

    首先,与其他语言不同,JS的效率很大程度是取决于JS engine的效率.除了引擎实现的优劣外,引擎自己也会为一些特殊的代码模式采取一些优化的策略.例如FF.Opera和Safari的JS引擎,都对字 ...

随机推荐

  1. java.lang.IllegalArgumentException,java.util.zip.ZipException 解决办法

    控制台错误信息: 严重: A child container failed during start java.util.concurrent.ExecutionException: org.apac ...

  2. Python 读取excel指定的列

    一.摘要 在这篇文章中: https://www.cnblogs.com/xiao987334176/p/9330368.html#autoid-4-5-2 介绍了使用 xlrd 模块,读取指定坐标的 ...

  3. git 学习笔记 -- 创建标签

    在Git中打标签非常简单,首先,切换到需要打标签的分支上: $ git branch * dev master $ git checkout master Switched to branch 'ma ...

  4. Scala 系列(一)—— Scala 简介及开发环境配置

    一.Scala简介 1.1 概念 Scala 全称为 Scalable Language,即"可伸缩的语言",之所以这样命名,是因为它的设计目标是希望伴随着用户的需求一起成长.Sc ...

  5. sql分页优化

    索引优化 注意查询的数据占总数据达到一定量的时候可能导致索引失效.可以用limit或者指定列缩小数据区域可以解决. 以时间orderby排序的limit分页优化 前提用order by分页 limit ...

  6. MySQL计算相邻两行某列差值的方法

    简述 博主最近因工作任务缠身,都无暇顾及到我的这片自留地了.前段时间稍有空闲,花了较多的精力学习<啊哈算法>,从中学习到很多之前没有太注重的内容,收益颇丰.但是这些算法题目还没有看完,等后 ...

  7. 【开发笔记】- SSM使用velocity模板语言

    1.在pom.xml里添加velocity模板语言支持的依赖 <!-- velocity模板语言支持包 --> <dependency> <groupId>org. ...

  8. 【转载】C#中int.TryParse方法和int.Parse方法的异同之处

    在C#编程过程中,int.TryParse方法和int.Parse方法都可以将字符串string转换为整型int类型,但两者还是有区别,最重要的区别在于int.TryParse方法在字符串无法转换为i ...

  9. Code Clean读书笔记

    代码整洁之道读书笔记 by fangpc 序言部分 "神在细节之中" - 建筑师路德维希 5S哲学(精益) 整理(Seiri):搞清楚事物之所在--通过恰当地命名之类的手段--至关 ...

  10. mariadb远程授权问题

    安装mariadb后,使用远程连接时 密码没有问题 但是每次打开都报这个错误: 这个错误是在进行远程连接的时候密码正确, 但是,进行远程授权的时候授权密码错误. 在数据库中执行下述代码即可: GRAN ...