防抖节流的区别与使用场景

参考:https://segmentfault.com/a/11...

防抖:如果短时间内大量触发同一事件,只会执行一次函数

对于短时间内连续触发的事件(滚动事件),防抖的含义就是让某个时间期限(如上面的1000毫秒)内,事件处理函数只执行一次

节流:

1、场景一:实时监听input输入框关键字,调用接口查询对应的内容 (节流)

场景二:watch监听多个变量,多个变量改变会触发相同的操作,会多次调用同一个方法 (防抖)

场景三:按钮提交时不加loading,多次快速点击会调用多次方法 (节流)

场景四:监听浏览器滚动条的位置,触发相关操作,滚一次会触发多个方法 (防抖)

    事实上我们并不需要如此高频的调用

场景五:页面resize事件,常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染(这种情形一般是使用防抖,因为只需要判断最后一次的变化情况)

lodash 节流失效

方法的第一个参数不能是箭头函数,会获取不到this


云胡不喜
73 声望11 粉丝

前端的忠实粉丝