- 防抖和节流
(1)说一下什么是防抖和节流?
——都是用来控制某个函数在一定时间内触发次数,两者都是为了减少触发频率,以便提高性能以及避免资源浪费,节流是第一个说了算,后续都会被节流阀屏蔽掉,防抖是最后一个说了算,前面启用的都会被清除。
防抖:防抖就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。(如果事件被频率触发,防抖能保证只有最后一次触发生效;前面N多次的触发都会被忽略;)
节流:节流就是指连续触发事件但是在 n 秒中只执行一次函数,节流会稀释函数的执行频率。(如果事件被频繁触发,节流能够减少事件触发的频率,因此,节流是有选择性地执行一部分事件;)
(2)怎么实现?
防抖:利用定时器延时触发事件,在延时的过程中如果有新的事件要触发,就立刻删除之前的定时器,防止重复触发
节流:设置一个锁头,在函数开头判断锁头为true直接return;如果为false,执行事件,并将锁头上锁(即改为true),设置一个定时器,相隔指定时间解锁锁头(即改为false)
(3)应用场景:
防抖在连续的事件,只需触发一次回调的场景有:
搜索框的搜索联想,用户在不断输入值时,用防抖来节约请求资源。
表单元素的校验,如手机号,邮箱,用户名等
节流在间隔一段时间执行一次回调的场景有:
①鼠标连续不断地触发某事件(如点击),只在单位时间内只触发一次;
②懒加载时要监听计算滚动条的位置,但不必每次滑动都触发,可以降低计算的频率,而不必去浪费CPU资源。