网站备案照相,广告推广app,免费ps素材图片大全,表格制作excel一、防抖和节流的适用场景 防抖#xff08;Debounce#xff09;#xff1a; 适合在输入框输入时的实时搜索、窗口大小调整时的resize事件等。节流#xff08;Throttle#xff09;#xff1a; 适合如页面滚动时的scroll事件、按钮点击时的请求发送等需要控制频率的场景。 … 一、防抖和节流的适用场景 防抖Debounce 适合在输入框输入时的实时搜索、窗口大小调整时的resize事件等。节流Throttle 适合如页面滚动时的scroll事件、按钮点击时的请求发送等需要控制频率的场景。 二、防抖
解释在设置的时间间隔内连续点击多次只执行最后一次(时间间隔大于设置的时间)的点击。
例如某个支付按钮不加防抖函数如果用户在一瞬间连续点击很多次就可能会出现生成多个订单的情况。搜索框用户输入文字调用搜索接口等等等....
函数如下设置连续两次点击的时间间隔为1秒。
data(){
return {clearId:null}
}methods:{debounce() {// 两次点击的时间间隔小于1秒则清除定时器重新计时否则就执行函数内部逻辑clearInterval(this.clearId)this.clearId setTimeout(() {// 发送请求 / 执行逻辑this.doAjax()}, 1000)}
} 三、节流
解释控制函数的执行频率使得函数在短时间内多次触发时只执行一次或者以指定的频率执行。它可以有效地减少函数的执行次数特别是在处理一些高频率触发的事件比如浏览器的滚动事件、resize事件、input输入事件等时非常有用可以优化性能和用户体验只允许在规定的时间内执行一次。
例如浏览器的滚动事件、resize事件、input输入事件等高频率触发的事件节流函数可以确保函数在一定时间间隔内最多执行一次即使它在短时间内被频繁调用。 data () {return {timer: 0}
},
methods:{throttle() {// 创建一个时间戳赋值给timer 下次的时间戳减去上次的时间戳 间隔大于1s 才会去固定触发这个函数只要小于1s永远不会触发const curClickTime Date.now()if (curClickTime - this.timer 1000) {this.doAjax() //大于1s调用函数this.timer curClickTime } else {console.log(时间间隔小于一秒, curClickTime )} }
} 四、防抖和节流的区别
共同点 都可以用来控制某个函数在短时间内被频繁调用时的执行次数从而优化性能和避免不必要的计算或请求。
不同点 思路不同 1. 防抖某个时间内不能再次触发一旦触发就要重新计算 2. 节流限制相邻两次调用的时间间隔
总结
防抖和节流都是为了优化性能而设计的方法但在具体应用时需要根据不同的场景选择合适的方式。防抖更多用于避免短时间内频繁触发节流则更多用于限制一定时间内的触发次数。
