JS的防抖和截流
JS的防抖和截流
-
转载
防抖
让某个函数在一定 事件间隔条件(去抖debounce) 或 时间间隔条件(节流throttle) 下才会去执行,避免快速多次执行函数(操作DOM,加载资源等等)给内存带来大量的消耗从而一定程度上降低性能问题。
debounce: 当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。
debounce使用场景:
- scroll事件(资源的加载)
- mouseover事件(拖拽)
- resize事件(响应式布局)
- keyup事件(输入框文字停止打字后再进行校验)
方法实现:
/** * 防反跳。fn函数在最后一次调用时刻的delay毫秒之后执行! * @param fn 执行函数 * @param delay 时间间隔 * @param isImmediate 为true,debounce会在delay时间间隔的开始时立即调用这个函数 * @returns {Function} */ function debounce(fn, delay, isImmediate) { var timer = null; //初始化timer,作为计时清除依据 return function() { var context = this; //获取函数所在作用域this var args = arguments; //取得传入参数 clearTimeout(timer); if(isImmediate timer === null) { //时间间隔外立即执行 fn.apply(context,args); timer = 0; return; } timer = setTimeout(function() { fn.apply(context,args); timer = null; }, delay); } } /* 方法执行e.g. */ var btn = document.getElementById('btn'); var el = document.getElementById('display'); var init = 0; btn.addEventListener('click', debounce(function() { init++; el.innerText = init; }, 1000,true));
- 截流
throttle:预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期。
throttle使用场景:
- click事件(不停快速点击按钮,减少触发频次)
- scroll事件(返回顶部按钮出现隐藏事件触发)
- keyup事件(输入框文字与显示栏内容复制同步)
- 减少ajax请求,降低请求频率
方法实现:
/** * 创建并返回一个像节流阀一样的函数,当重复调用函数的时候,最多每隔delay毫秒调用一次该函数 * @param fn 执行函数 * @param delay 时间间隔 * @returns {Function} */ function throttle(fn, delay) { var timer = null; var timeStamp = new Date(); return function() { var context = this; //获取函数所在作用域this var args = arguments; //取得传入参数 if(new Date()-timeStampdelay){ timeStamp = new Date(); timer = setTimeout(function(){ fn.apply(context,args); },delay); } } } /* 方法执行 */ var btn = document.getElementById('btn'); var el = document.getElementById('display'); var init = 0; btn.addEventListener('click', throttle(function() { init++; el.innerText = init; }, 1000));
或者:
function throttle(fn, threshhold, scope) { threshhold || (threshhold = 250); var last, deferTimer; return function () { var context = scope || this; var now = +new Date(), args = arguments; if (last now last + threshhold) { // hold on to it clearTimeout(deferTimer); deferTimer = setTimeout(function () { last = now; fn.apply(context, args); }, threshhold); } else { last = now; fn.apply(context, args); } }; }
JS的防抖和截流 相关文章
- 转载-K8S动态更新pod镜像
转载:https://www.jianshu.com/p/8c2eafc46104 kubernetes集群中镜像有三种更新方式,无论哪一种都属于滚动式更新,在更新过程中服务不会中断 编辑已存在的yaml文件,使用apply命令更新 以nginx镜像为例,查看现有nginx版本 [root@k8s-node2 .ssh]# curl -I
- 如何生成干净可阅读的汇编代码
转载:如何生成干净可阅读的汇编代码 - 泰晓科技 (tinylab.org) 新版 gcc 默认开启了几个选项,导致学习汇编语言,尤其是入门的同学,很难。 以如下代码为例: $ cat demo.c #include stdio.h int main(void) { int i; char buffer[64]; i = 1; buffer[0] =
- IO多路复用之select总结(转载)
1、基本概念 IO多路复用是指内核一旦发现进程指定的一个或者多个IO条件准备读取,它就通知该进程。IO多路复用适用如下场合: (1)当客户处理多个描述字时(一般是交互式输入和网络套接口),必须使用I/O复用。 (2)当一个客户同时处理多个套接口时,而这种
- JavaScript中this的指向
转载地址: https://note.youdao.com/ynoteshare1/index.htmlid=b2fab3b044aa90033395df0c8c9ca3a4type=note 引子 在JavaScript中 this 的指向总是让人很困惑,它到底指的啥为了彻底弄清它,我们就来探讨一下吧。 this 在不同的执行环境,不同的用法下会有所
- ElasticSearch创建动态索引
转载自:https://www.cnblogs.com/deepSleeping/p/11976262.html 需求:某实例需要按照月份来维护,所以之前的“写死”索引的方式当然不行了。通过百度和看SpringDataElasticSearch官方文档,最后解决了这个问题。 关键技术点: Spel表达式 (通过调用方法来
- 程序员 Homebrew 使用指北
转载自:https://sspai.com/post/56009 对于习惯了使用命令来完成一切的程序员来说,安装软件这种小事,自然是能够用命令解决,就不用图形界面选择。但是在 Linux 中,我们有 yum 、 apt 、 dnf 、 pkg 等命令来完成软件的安装,macOS 却并未为我们提供一个
- Elasticsearch 之索引别名 alias
转载自:https://my.oschina.net/u/204498/blog/529960 一、 Elasticsearch的别名,就类似数据库的视图。 创建别名: 我们为索引my_index创建一个别名my_index_alias,这样我们对my_index_alias的操作就像对my_index的操作一样 POST /_aliases{ "actions": [ {
- Java 树形结构数据生成导出excel文件(转载)
转载自https://blog.csdn.net/LZY_1993/article/details/114083456 效果(不上图空谈就是耍流氓) 用法 1 String jsonStr = "{\"name\":\"aaa\",\"children\":[{\"name\":\"bbb\",\"children\":[{\"name\":\"eee\"},{\"name\":\"fff\",\"children\":[{\"name
- MySQL 事务的隔离级别
转载:https://developer.aliyun.com/article/743691accounttraceid=80d4fddb3dc64b97a71118659e106221tozz 简介:MySQL的事务隔离级别一共有四个,分别是读未提交、读已提交、可重复读以及可串行化。 事前准备数据 mysql create table city( - id int(10) a
- 【转载】Markdown基本语法
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。 Markdown 语言在 2004 由约翰·格鲁伯(英语: John Gruber )创建。 Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。 Markdown 编写的文档后