泉州网站建站模板,淘宝优惠券返利网站怎么做,沈阳医大男科怎么样,生成图片防抖与节流
1.防抖
1.1 为什么要防抖#xff1f;
在项目中#xff0c;有的操作是高频触发的#xff0c;但是其实触发一次就好了#xff0c;比如我们短时间内多次缩放页面#xff0c;那么我们不应该每次缩放都去执行操作#xff0c;应该只做一次就好。再比如说监听输入…防抖与节流
1.防抖
1.1 为什么要防抖
在项目中有的操作是高频触发的但是其实触发一次就好了比如我们短时间内多次缩放页面那么我们不应该每次缩放都去执行操作应该只做一次就好。再比如说监听输入框的输入不应该每次都去触发监听应该是用户完成一段输入后再进行触发。
所以防抖就是防止抖动避免事件的重复触发。
思路等待用户高频操作完成后再完成操作。
1.2 基础防抖如何实现 基础设计思路事件触发后开启一个定时器当该定时器到时间时触发操作而如果事件在该定时器限定的时间内再次触发则清除当前定时器并再次开启一个新的定时器。
代码如下
// fn --- 要执行的操作delay --- 延迟时间在该时间内用户没有再次触发则执行操作
function debounce(fn, delay){// timer --- 定时器的名称用于清除定时器let timer null;return function(arguments){// 实际进行防抖的部分// 如果再次触发首先清除上一次的定时器clearTimeout(timer);// 创建一个新定时器并记录名称timer setTimeout(() {// 用apply方法执行目标函数fn.apply(this, arguments);}, delay)}
}实际上可以通过下面这张图来理解基础的防抖 2.节流
2.1 为什么要节流
基础的防抖存在一个问题事件会一直等到用户完成操作后一段时间在操作如果一直操作会一直不触发。比如说是一个按钮点击就发送请求如果一直点那么请求就会一直发布出去。这里正确的思路应该是第一次点击就发送然后上一个请求回来后才能再发即节流。
节流就是减少流量将频繁触发的事件减少并每隔一段时间执行。即控制事件触发的频率。
思路某个操作希望上一次的完成后再进行下一次或者希望隔一段时间触发一次
2.2 如何实现基础节流 基础设计思路我们可以设计一种类似控制阀门一样定期开放的函数事件触发时让函数执行一次然后关闭这个阀门过了一段时间后再将这个阀门打开再次触发事件。
代码如下
// fn --- 要执行的操作delay --- 延迟时间在该时间内操作最多只会执行一次
function throttle(fn, delay){// 阀门是否开启let valid true;return function(arguments){if(valid) { //如果阀门已经打开就继续往下设定定时器指明在一定延迟时间后执行一次操作// 此时已经确定会执行一次操作因此关闭阀门valid false;setTimeout(() {fn.apply(this, arguments);//定时器结束后执行valid true;//执行完成后打开阀门}, delay)}}
}实际上可以通过下面这张图来理解基础的节流 3.防抖节流的应用场景、联系以及区别
防抖
search搜索联想用户在不断输入值时用防抖来节约请求资源window触发resize的时候不断的调整浏览器窗口大小会不断的触发这个事件用防抖来让其只触发一次
节流
鼠标不断点击触发mousedown(单位时间内只触发一次)监听滚动事件比如是否滑到底部自动加载更多
联系与区别
防抖节流的共同点在于都是为了阻止操作高频触发从而浪费性能。
两者的不同点在于
防抖是触发高频事件后n秒内函数只会执行一次如果n秒内高频事件再次被触发则重新计时。适用于可以多次触发但触发只生效最后一次的场景可能会出现操作始终不执行的情况。而节流则不同事件高频触发无论触发多少次在一定时间内只会执行一次即定期执行。相比于防抖节流的响应更加平滑不会出现始终不执行操作的情况
4.防抖与节流的优化
对于上面的基础防抖与节流的方法主要有两个可以优化的方面
复用性优化对于实际项目中我们不可能在每次需要进行防抖节流的时候都重新写一遍代码因此我们需要将防抖节流的方法封装为内部API提高复用性功能方面的优化 防抖添加立即执行选项解决可能始终不执行的问题延迟防抖解决高频设定定时器的问题。节流可能需要点击后立即执行等等。
立即执行
在某些业务场景中使用防抖节流时基础的防抖节流可能会导致响应时间变长这就会影响到用户的使用体验因此需要在触发事件的时候立即执行处理函数但后续也能起到防抖节流的作用。
立即执行的防抖和节流其原理是一致的即添加一个计数器或立即执行的标识。
实现如下
// 防抖
export const debounce (fun , wait1000) {let timeout nulllet count 0return function(){let _this thislet arg argumentsif(timeout){//如果存在定时器就清空clearTimeout(timeout)}if (!count) {// 第一次点击时立即执行countfun.apply(_this, arg)timeout setTimeout(() {count 0}, wait)} else {counttimeout setTimeout(() {fun.apply(_this, arg)count 0}, wait)}}
}// 节流
export const throttled (fun, wait1000, immediate) {let preTime 0;let timerId;return function() {let _this this;let args arguments;if(immediate) { // immediate 为true 时立即执行let nowTime Date.now();if(nowTime - preTime wait) {fun.apply(_this, args);preTime nowTime;}} else {if(!timerId) {timerId setTimeout(function() {fun.apply(_this, args);timerId null;}, wait);}}}
}其他优化
在不同的业务场景中对于防抖节流也有不同的需求如果单纯地为了每一个场景编写防抖节流函数是相当费事且麻烦的工作因此不如使用别人封装好的库。
参考http://t.csdn.cn/RVzMK
最终解决方案
underscore.js 库中的 _.throttle() 和 _.debounce() — 参考https://www.likecs.com/show-307738657.html
