为什么需要函数节流和防抖
频繁执行dom操作,资源加载等行为,可能会导致UI卡顿或浏览器崩溃
如果每次执行事件就会触发函数,这样的做法不仅没有意义,还会浪费资源
函数节流
每隔一定的时间才能调用函数,而不是每次触发事件就执行一次,这样会减少资源的浪费
(连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。)
函数防抖
当事件触发完一定时间后,在这个时间间隔内没有事件再次触发,就认为该事件触发完成了,此时可以执行函数
(触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。)
code
节流:
1 | function throttle(fn, delay) { |
防抖:
1 | function debounce(fn, delay) { |