引言
在用户高频率触发事件时,会使得浏览器的负担加重,可能会导致用户体验非常糟糕。这时就可以使用防抖和节流来减少事件处理函数被调用的频率。
防抖
概念:一定时间内,频繁触发事件,事件处理函数只执行最后一次。
实现方式:定义一个全局变量存储setTimeOut的值,每调用一次事件处理函数,都先清除掉上一次设置的延时器,然后设置本次事件处理函数的setTimeOut,这样可以实现延时器规定的时间内只触发一次事件处理函数原本应该执行的功能代码。
节流
概念:一定时间内,频繁触发事件,事件处理函数只执行一次。
实现方式:声明一个全局变量记录事件的触发时间,每一次触发事件调用事件处理函数都获取当前时间,比较当前时间和上一次触发事件的时间间隔,如果大于节流的时间,就执行功能代码,然后把当前时间赋值给全局定义的变量,当做下一次触发事件时比较的对象。