使用rxjs以及javascript解决前端的防抖和节流
JavaScript实现方式:
防抖
触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间;
思路:每次触发事件时都取消之前的延时调用方法:
举个例子:做一个自动查询的功能
假装下面的代码是从服务器获取的数据(下面会用到):// 假装这是个接口function getData(val){ returnnew Promise(function(resolve, reject){
setTimeout(function(){if(!val){resolve([]);return;}var json = [{name:"萧山国际机场",jianpin:"xsgjjc",threeCode:"xjc"},{name:"北京南苑机场",jianpin:"bjnyjc",threeCode:"byc"},{name:"上海虹桥机场",jianpin:"shhqjc",threeCode:"hcg"},{name:"成都机场",jianpin:"cdjc",threeCode:"cjc"}];var newJson = json.filter(function(item){return item.name.indexOf(val)==0||item.jianpin.indexOf(val)==0||item.threeCode.indexOf(val)==0});resolve(newJson);},1000)}) }
在文本框输入关键字去服务器实时请求对应的数据,如下代码;<body>
<input type="text" placeholder="简拼/汉字/三字码" id="test"/><script>var $test = document.getElementById('test');$test.onkeyup =autoSearch;function autoSearch(){var val = $test.value;getData(val).then(function(res){console.log(res)})} </script> </body>
结果如下图,在运行的时候会发现存在一个问题:这个函数的默认执行频率太高了,高到什么程度呢?我们输入"萧山",函数执行了9次!,然而我们需要的只是最后一次.
然而实际上我们并不需要如此高频的反馈,毕竟浏览器和服务器的性能是有限的,所以接着讨论如何优化这种场景。
function debounce(fn,delay){let timer = null//闭包return function() {if(timer){clearTimeout(timer) }timer = setTimeout(fn,delay)} }// 改写上面的代码 ...$test.onkeyup = debounce(autoSearch,1000); ...
再次运行结果就是我们想要的结果了:
节流
高频事件触发,但在 n 秒内只会执行一次,所以节流会稀释函数的执行频率。
思路:每次触发事件时都判断当前是否有等待执行的延时函数。
还是上面的例子:如果某个用户闲的蛋疼,一直按着键盘不撒手,那么只要她在1秒内重新按了键盘,就永远不会有结果输出,但是我们还想要在某个时间间隔之后给出反馈呢
使用方法跟debounce一样。代码逻辑也类似。在触发时超过间隔时间interval ms则执行。否则不执行。if判断中的setTimeout是保证最后一次事件触发后能够调用,所以每次执行没到间隔时间时先清除timer,再重新启动timer。而在达到间隔时间时执行函数。代码逻辑也很简单,不用多说,相信聪明的你一看就能明白。
function throttle(fn,interval){var last;var timer;var interval=interval||200;return function(){var th=this;var args=arguments;var now=+new Date();if(last&&now-last<interval){clearTimeout(timer);timer=setTimeout(function(){last=now;fn.apply(th,args);},interval);}else{last=now;fn.apply(th,args);}} }// 改写上面的代码 ...$test.onkeyup = throttle(autoSearch,1000); ...
运行结果就是我们想要的结果了(不管文本框输入什么内容,没1秒输出一次结果):
rxjs实现方式
使用rxjs,使用起来更方便(要记得要安装或者引入rxjs哦)
使用debounceTime(防抖)和throttleTime(节流)操作符,对流进行限制,然后再订阅符合规则的流,输出想要的数据即可,
rxjs的可以参考官方文档.https://cn.rx.js.org/
也可以查看Rx观测的交互图:
debounceTime: https://rxmarbles.com/#debounceTime
throttleTime:https://rxmarbles.com/#throttleTime
例子:
<head><script src="https://cdn.bootcss.com/rxjs/6.0.0-alpha.3/Rx.min.js"></script> </head><body> 防抖:<input type="text" placeholder="简拼/汉字/三字码" id="debounce"/><br/><br/> 节流:<input type="text" placeholder="简拼/汉字/三字码" id="throttle"/> <script>var $debounce = document.getElementById('debounce');var $throttle = document.getElementById('throttle');const debounce$ = Rx.Observable.fromEvent($debounce, 'input');const throttle = Rx.Observable.fromEvent($throttle, 'input');// 节流 debounce$.debounceTime(1000).subscribe(function (e) {var value = e.target.value;console.log('防抖:'+value)});// 防抖 throttle.throttleTime(1000).subscribe(function (e) {var value = e.target.value;console.log('节流:'+value)}); </script> </body>
结果:
转载于:https://www.cnblogs.com/darkbluelove/p/11418106.html
使用rxjs以及javascript解决前端的防抖和节流相关推荐
- 前端基础-防抖和节流
大家好,我是龙骑士,今天给大家讲一下前端基础:防抖和节流 防抖 高频事件触发后, n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算冷却时间 节流 高频事件n 秒内,函数不论触发 ...
- 马小看前端(防抖和节流)
马小看前端(防抖节流) 在前端的开发过程中,有一部分用户行为频繁的去触发事件,而对于dom操作来说,有耗费性能的问题,很可能导致卡顿,甚至浏览器的崩溃,防抖和节流就是为了解决这个问题 防抖: 实现的场 ...
- mysql闭包的概念_彻底搞懂JavaScript的闭包、防抖跟节流
最近出去面试了一下,收获颇多!!! 以前的我,追求实际,比较追求实用价值,然而最近面试,传说中的面试造火箭,工作拧螺丝,竟然被我遇到了.虽然很多知识点在实际工作中并不经常用到,但人家就是靠这个来筛选人 ...
- JavaScript性能优化8——防抖与节流
目录 一.引入 为什么需要防抖和节流 使用场景 概念 二.防抖函数实现 场景 原始代码 防抖函数代码 三.节流函数实现 场景 原始代码 节流函数代码 一.引入 为什么需要防抖和节流 我们现在JS主要是 ...
- 高性能滚动scroll(防抖和节流)
滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件. var i = 0;window.addEventListener('scr ...
- 前端战五渣学JavaScript——防抖、节流和rAF
看了<JavaScript高级程序设计>和网上的一些博客,感觉对函数节流和函数防抖的概念是反的,以下我写的关于防抖和节流的概念取决于多数人的概念吧,并且基于伦敦前端工程师David Cor ...
- JavaScript防抖与节流
JavaScript防抖与节流 1 为什么需要防抖和节流 2 防抖与节流原理 3 实现一个防抖函数 3.1 初步实现 3.2 this问题 3.3 event问题 3.4 立即执行 3.5 返回值问题 ...
- JavaScript 同源策略 跨域 JSONP CORS 防抖和节流
同源策略与跨域 同源策略 定义 比较 通俗理解 跨域 定义 浏览器对跨域请求的拦截 实现跨域的两种方法 自定义JSONP jQuery的JSONP 防抖与节流 防抖 节流 总结 同源策略 定义 同源策 ...
- Javascript防抖函数节流函数的介绍(最详细)、彻底搞懂防抖节流的区别以及使用第三方库的防抖节流函数
文章目录 1.防抖节流函数介绍 1.1 认识防抖节流函数 1.2 认识防抖函数 1.3 防抖函数应用 1.4 认识节流函数 1.5 节流函数应用 1.6 生活中的例子 2.Underscore库 2. ...
最新文章
- PyTorch核心开发者灵魂发问:我们怎么越来越像Julia了?
- Reverse Words in a String
- 一位程序员的奋斗历程!------转载
- 流式计算优化:时效性 [王方浩视角]
- 【渝粤教育】广东开放大学 土木工程材料 形成性考核 (22)
- 关于Dijkstra三种堆速度的研究
- 全栈工程师可以分为哪几类?
- 阿里员工:只有两百万现金和一套房,这样干着没意思
- w7计算机的工具栏爱那里,win7系统底下任务栏不见了的解决方法
- 操作系统:银行家算法的实现
- 将网易博客搬至CSDN
- cesium实现面状要素的立体拉伸效果
- java web统计报表_用Java在Web页面上输出统计图 统计报表
- Centos7下turn off cpu throttling
- css实现人走路效果,纯css实现机器人走路动画
- Android Style和自定义属性
- Visio画UML类图
- string数据库使用和实践第一部分string数据库介绍
- Lightroom 中照片的修改信息储存在哪了?
- python 写出好看且实用的后台管理-django 后台管理美化
热门文章
- Highchart 改编风力风向图
- 【每天学点管理】——非暴力沟通
- 怎么设置Android Studio的代码字体和代码文字大小
- 6.串、数组、广义表
- Z-Libary最新地址检测,再也不用担心找不到ZLibary了
- Galera:多主同步MySQL集群原理解析
- 电子教学试验设备计算机仿真,【计算机仿真论文】高频电子线路教学改革计算机仿真论文(共2115字)...
- Matlab符号计算求导与化简
- Xcode5中的版本管理(中英对照)
- preparedStatement.setDate()丢失时间问题