面试经常会被问到的节流和防抖,一分钟理解

导语:
最近整理面试题目,经常能够看到手写节流和防抖函数,已经它们的用处。一分钟学会它们。

微信搜索 【web小馆】,回复 ”全栈博客项目“,即可获取 项目源码和后续的实战文章教程。

这里写目录标题一,防抖1,定义和原理2,用处一,节流1,定义和原理2,用处

一,防抖
1,定义和原理

定义:防抖,即如果短时间内大量触发同一事件,都会重置计时器,等到事件不触发了,再等待规定的事件,才会执行函数。

(举个简单的例子,就是如果你在我这篇博文疯狂点赞再取消赞,这个过程都会把计时器清空,等到你点累了不点了,等待0.5秒,才会触发函数,把你最终结果传给服务器。)而这整个过程就触发了一次点赞函数到服务器。

原理:设置一个定时器,设置在规定的时间后触发事件处理,每次触发事件都会重置计时器。

2,用处

防抖用于搜索框和滚动的监听事件处理,如果没有防抖,那么每输入一个字或者滚动屏幕,都会触发事件,甚至一秒钟触发几十次,性能就会浪费。

function debounce(fn, delay = 500) {

let timer = null

return function () {
if (timer) {
clearTimeout(timer) //如果timer有定义,清空
}
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
}, delay)
}
}

一,节流
1,定义和原理

定义:每隔一段时间就执行一次。
原理:设置一个定时器,设置0.5秒后执行事件,如果时间到了,就会执行函数并重置定时器,等待下一个0.5秒后再执行。

2,用处

滚动栏的位置查询,就能设置每0.5秒执行一次函数。

function throttle(fn, delay = 100) {
let timer = null

return function () {
if (timer) {
return
}
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
}, delay)
}
}

结语:

面试经常会被问到的节流和防抖,一分钟理解
建议收藏,不然刷着刷着就可能找不到了。

有什么前端的问题欢迎私信我~期待你的到来。

同时你的点赞是对我最大的鼓励,谢谢。

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

面试经常会被问到的节流和防抖,一分钟理解

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 面试经常会被问到的节流和防抖,一分钟理解
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏