正常用到的也就简单的节流防抖函数,不要想那么复杂。

节流防抖.drawio.png

在哪个地方防抖?

假设现在有inRange[0, 100)根据scrollY得到,scrollY变化是inRange变化的必要非充分条件,即scrollY不变,inRange也不会变。

例如debounce delay设为300ms,一开始scrollY为0,inRange为true,

scrollY花费100ms,从0变为100

scrollY花费400ms,从100变化500

scrollY话费10000ms,在500与1000之间变化

如果在scrollY处防抖,inRange在10800ms后才变为false

如果在inRange处防抖,真实的inRange在400ms后就更新为false


总结:如果希望响应更即时,并且状态计算不是很复杂(inRange计算)可以在末端(inRange)防抖。如果不在乎响应即时,或者状态计算比较复杂,则在始端(scrollY)做防抖。