防抖和节流相关知识整理

场景1:在滚动事件中做复杂计算;场景2:实现一个预防二次点击操作的按钮;
这些需求都可以通过函数防抖来实现,尤其是第一个需求,如果在频繁的事件回调中做复杂计算,很有可能导致页面卡顿,不如将多次计算合并为一次,只在一个精确点做操作。
防抖和节流的作用都是防止函数多次调用。区别在于,假设一个用户一直触发这个函数,且每次触发函数的间隔小于wait,防抖情况下只会调用一次,而节流的情况下会每隔一段时间(参数wait)调用一次。
防抖的定义:触发高频事件后n秒内函数只执行一次,如果n秒内高频事件再次被触发,则重新计算时间。
实现的思路:每次触发事件时都取消之前的延时调用方法。

节流的定义:高频事件触发,但在n秒内只会执行一次,将多次执行变成每隔一段时间执行,节流会稀释函数的执行频率。
实现的思路:每次触发事件时都判断当前是否有等待执行的延时函数。

未经允许不得转载:专注は互联网 · 用户 · 产品 - 极简 · 生活 · 禅修 » 防抖和节流相关知识整理

赞 (0)

扫码打Call!

分享到:更多 ()

留言 0

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