JavaScript 防抖和节流

防抖与节流函数是一种最常用的高频触发优化方式,能对性能有较大的帮助

就比如我们经常会需要绑定一些持续触发的事件,如 resize、scroll、mousemove 等等,但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数

①防抖(debounce)

1.例如在搜索引擎搜索问题的时候,我们当然是希望用户输入完最后一个字才调用查询接口,这个时候适用延迟执行的防抖函数,它总是在一连串(间隔小于wait的)函数触发之后调用

2.例如用户点star的时候,我们希望用户点第一下的时候就去调用接口,并且成功之后改变star按钮的样子,用户就可以立马得到反馈是否star成功了,这个情况适用立即执行的防抖函数,它总是在第一次调用,并且下一次调用必须与前一次调用的时间间隔大于wait才会触发。
在这里插入图片描述

②节流(throttle)

节流是指连续触发事件但是在 wait 秒中只执行一次函数。节流会稀释函数的执行频率。

1.例如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据
在这里插入图片描述