防抖和节流

参考:2分钟彻底掌握JS防抖和节流,前端面试必备知识!_哔哩哔哩_bilibili

参考视频为学习过程中比较清晰的一个老师,时长较短,建议观看视频

一 防抖(回城)

防抖和节流_第1张图片

概念:防抖时,操作不执行,不操作了执行。

场景类比:一直玩手机,手机不息屏,不玩时才息屏。  

使用场景:连续点击 或 输入框查询,防止重复触发。

代码:防抖时,每次操作先清除定时器,再开启定时器。如果连续操作,就会清除掉定时器,使定时器没有办法完成,只有不操作,定时器才完成。

防抖和节流_第2张图片

代码解释:

① 接收一个回调函数,返回一个回调函数

② 定义定时器,并开启定时器

③每次执行前,清除定时器

④传入对应参数,改变this指向

二 节流(技能)

防抖和节流_第3张图片

概念:节流时,到了时间就必须执行一次

场景类比:等公交

使用场景:鼠标移动事件,页面滚动事件

代码:

防抖和节流_第4张图片

代码解说:

① 接受一个回调函数,返回一个回调函数

②定义一个厨师时间,每次执行的时候获取一下当前的时间,用当前的时间减去初始时间,如果大于执行时间,就执行对应方法。

③给现在的时间赋值给初始时间

④改变this,传入参数

你可能感兴趣的:(前端基础概念,前端,js)