好久不见,疫情严重,无聊在家,决定巩固一下自己所学习的算法之类的知识。(防抖与节流)

因为疫情的原因没能够好好的准备去实习的复习。对我来说是一件坏事也是一件好事情。坏事情就是我很有可能不会迈出那一步了,在短时间内。好事情是我能够沉下心去好好的学习有关于前端的知识。
来来回回学习前端也快满了一年了,觉得自己实在是浪费了太多的时间在没必要的地方。但是也不能说是没有收获的。如今回到正确的路上,算晚也不算太晚了。
如果看到这篇文章的你是一个新手的话,刚刚踏上前端的路并没有太久,切记,千万不要着急的去想要掌控一切。安安心心的去看看别人的面经,去看看别人的知识巩固程度。这是看视频所无法给予的。万学归宗,好好的拿起一本高程,好好地踏踏实实的系统学习,背下来,半年足够了。
今天我想要讨论的就是所谓的节流和防抖算法。
节流和防抖算是基础必备的一些算法中的基础了。
一般来说,我们在设计一些功能的时候,会频繁的触发一个函数,举个例子吧,就是比如我们在检索一个人的姓名的时候,底下会动态的出现也许能够匹配的人的名字。
输入:刘 输出: 刘东,刘西,刘东西。
输入:刘东 输出:刘东,刘东西。
一般来说在数据的长度不长,数据的数量不多的情况下,匹配所浪费的资源并没有太明显,一旦数量级别一上去,频繁的执行一个比较消耗资源的函数就会造成性能的浪费。
这个时候节流和防抖的优势就体现出来了。
function debounce(fn,threshold){
let timer = null;
return function(){
clearTimeout(timer);
timer=setTimeout(() => {
fn.apply(this)
},threshold)
}
}
以上是一个简单的防抖算法。
一开始定义一个debounce函数,内置两个参数,一个是需要执行的函数,一个是防抖的时间(意思是多久执行一次函数),之前的是每次输入一个字符就会执行函数,有了防抖以后,就可以经过threshold毫秒才执行一次。
一开始,设定一个timer,此时函数内有三个变量,fn,threshold,timer,然后返回一个匿名函数的闭包,匿名函数闭包在其活动对象的作用域链销毁之后任然保存其的活动对象,意味着,在返回了这个匿名函数的闭包时,timer,fn,threshold依旧保存着。在匿名函数内,执行的是清楚时间timer,设置定时器如果在规定时间内,任然执行这个函数,那么久会造成定时器的一次次重启,对于真正的函数fn的执行再一次的推移,因为这个几行代码对性能的消耗可以忽略不计,故达到了性能优化的功能。
这个时候就会产生以下的情况:
输入:刘 输出: 刘东,刘西,刘东西。(输入“刘”后threshold ms才出现结果)
输入:刘东 输出:刘东,刘东西。(输入“刘东”后threshold ms才出现结果)
每次有了新的输入后,对真正需要触发的函数推迟触发,如上,就不会频繁的触发查询的函数了,有效的改善了体验和性能。

接下来介绍一下防抖的一个兄弟,节流。

节流算法在我看来和防抖的思想是差不多的。节流是防止用户在短时间内的连续请求。
例如,设计网页中有一个网络请求的按钮,有些用户就一直点击这个按钮,就有可能在一秒钟之内产生多个请求,这是非常不必要的。
节流就是限制了用户只能在一段时间内请求一次,这样可以同时缓解了客户端和服务器的压力。以下是节流算法的实现。
function throttle(fn,threshold){
let Now=Date.now();
let limited=false;
return function(){
let current=Date.now();
limited=limited && current-Now>threshold
if(!limited){
fn.apply(this);
limited=true;
let Now=Date.now();
}
}
}
防抖和节流都是应用了函数柯里化,使得参数复用,你也可以不用。如果你不懂什么是函数柯里化的话你可以无视这段文字,没什么影响。
此处和上面的防抖的参数都是一致的,一个是真正的需要执行的函数本体,一个是在多长的时间段内限制执行次数(大白话了)。
然后往下就是一个当前时间的变量,再定义一个节流标识,为false则没有被节流,可以触发函数,为ture则表明被节流了,无法触发函数。
接下来返回一个函数的闭包,里面再定义了触发函数时的时间,然后一个关于节流标识符的判断,这个逻辑你自己推推就比较清楚,说起来比较乱。
然后就是一个if判断,如果没被节流,那么就执行函数,并且将其标识符设置为被节流。重新计时。
需要自己在举个例子多看看比较合适。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值