防抖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. 027 SSM综合练习03--数据后台管理系统--product-list.jsp和main.jsp页面制作

    1.product-list.jsp页面制作 (1)创建一个product-list1.jsp文件,清空,只保留 <%@ page contentType="text/html;cha ...

  2. Django框架第七篇(模型层)--多表操作:一对多/多对多增删改,跨表查询(基于对象、基于双下划线跨表查询),聚合查询,分组查询,F查询与Q查询

    一.多表操作 一对多字段的增删改(book表和publish表是一对多关系,publish_id字段) 增  create publish_id 传数字   (publish_id是数据库显示的字段名 ...

  3. 网格搜索与K近邻中更多的超参数

    目录 网格搜索与K近邻中更多的超参数 一.knn网格搜索超参寻优 二.更多距离的定义 1.向量空间余弦相似度 2.调整余弦相似度 3.皮尔森相关系数 4.杰卡德相似系数 网格搜索与K近邻中更多的超参数 ...

  4. 英语insuraunce保险

    中文名:保险 外文名:insurance或insuraunce 类型:保障机制,商业行为 作用:资金融通.损失补偿等 原则:分摊.代位.大数法则等原则 性质:契约经济关系 意义:市场经济条件下风险管理 ...

  5. 通过分析 WPF 的渲染脏区优化渲染性能

    原文:通过分析 WPF 的渲染脏区优化渲染性能 本文介绍通过发现渲染脏区来提高渲染性能. 本文内容 脏区 Dirty Region WPF 性能套件 脏区监视 优化脏区重绘 脏区 Dirty Regi ...

  6. css3 media媒体查询器用法总结(附js兼容方法)

    css3 media媒体查询器用法总结 标签:class   代码   style   html   sp   src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...

  7. 快数据时代下,Moka携手DataPipeline提升招聘效能

    新时代下,招聘早已不再是过去被动式的流程管控行为,智能化的招聘技术被越来越多地运用到企业招聘中. 为能更好地帮助企业优化招聘渠道,提高招聘效率,提升雇主品牌,Moka从成立之初便秉承“简单”的逻辑,通 ...

  8. 设计的一些kubernetes面试题

    公司现在上了一部分的业务至k8s,老实说,我心里很慌,在项目改造中,每天都会遇到很多问题,好友找我出一份k8s面试题,参考了网上的一些,再加上自己公司遇到的一些问题,整理如下: 参考链接:http:/ ...

  9. Jmeter学习笔记(二十一)——Concurrency Thread Group阶梯式加压测试

    一.先安装jmeter的插件管理工具 1.下载地址:jmeter-plugins.org 点击plugins-manager.jar下载. 2.安装 把下载下来的文件plugins-manager.j ...

  10. 基于Text-CNN模型的中文文本分类实战

    Text-CNN 1.文本分类 转眼学生生涯就结束了,在家待就业期间正好有一段空闲期,可以对曾经感兴趣的一些知识点进行总结. 本文介绍NLP中文本分类任务中核心流程进行了系统的介绍,文末给出一个基于T ...