面试题提问:你在项目职责中提到了防抖节流,那对于防抖节流你是怎么理解的,有没有在实际项目中运用过防抖节流呢?
答:最近这个项目确实运用过防抖节流来解决过一些问题,下面我将讲述讲述我的使用场景和我对于防抖节流的理解吧!
1、初识防抖节流:第一次知道防抖节流还是在学习时候接触到的,主要是还是通过官网、视频、资料这些学习渠道,从这些资料中得到了理解,同时也配合做了小案例,但现在回想我觉得这时候我应该只是死记硬背知道了这个知识点,对于实际应用场景和实际解决问题并没有深刻的体会:
(1)防抖:确保在指定时间内只执行一次函数。
eg:假设我们有一个搜索框,用户在输入时会实时发送请求到服务器获取搜索结果。为了防止用户每次按键都发送请求,我们可以对输入事件使用防抖
(2)节流:保证在指定时间内至少执行一次函数。
eg:假设有一个页面,当用户滚动页面时,希望更新页面的一些内容,但不希望滚动时频繁更新
2、再识防抖节流:再次认识防抖节流主要是在工作中解决问题过程中运用的,这次对其理解和运用印象非常深刻:
(1)产品需求:在Excel图表上方增加修改图表名称的功能。
(2)解决思路:使用表单元素的editEnd事件编写一个回调函数:将用户输入的值重新赋值给value即可实现!
(3)遇到问题:但实现过程我没想得这么简单,遇到了报错提示:大概就是数据库里存了两条相同的修改信息,导致修改失败!其实刚开始遇到这个问题,我打印了好多可能触发该事件的地方,但都没发现这个问题,后来终于发现原来是这个editEnd事件:用户只点击修改1次,但会自动调用2次。
(4)解决问题:使用防抖debounce函数解决了该问题!保证用户点击修改图表名称时该函数只调用1次!
(5)代码演示:需要可找我,这儿不能粘贴图片!
更多详情:爱米的前端小笔记(csdnxitujuejinzhiHuBaidu小红shu)同步更新,等你来看!都是利用下班时间整理的,整理不易,大家多多👍💛➕🤔哦!你们的支持才是我不断更新的动力!