js的防抖、节流

JavaScript07

js的防抖、节流,第1张

防抖和节流,这是前端防止用户频繁调用同一个接口的方法,比如短时间重复点击上传同一个文件,短时间重复点击提交同一个评论,异步的操作还没给你带来反馈,于是你重复上传了多个文件,重复提交了多个评论。

举例一个场景:为了例子更加简单,我们就用延迟来模拟一个后端接口返回的过程。

以上是一个发表评论的例子,由于接口一秒后才会响应评论反馈到界面上。

用户本意只是发布一条评论,但是由于接口需要响应时间,他以为自己的第一次点击没有生效于是就多点击了两次,结果显而易见,就是非用户本意的发布了三条一样的评论。

我们希望的是用户不要在请求还在进行的时候,频繁的重复发送请求。这时候就需要防抖节流了。

快速点击几次,还是只会发送一条评论。

但是缺点就是用户得到响应的时间更久了,得要算上延迟加上接口的响应。

速点击几次,还是只会发送一条评论。只有一条请求发布成功之后,才能够发布第二条请求,对于该场景十分合适。

function debounce(func, delay) {

let timer

//当前的this是指向window

return function (...args) {

//当前的this是指向dom元素

if (timer) {

clearTimeout(timer)

}

timer = setTimeout(() =>{

func.apply(this, args)

}, delay)

}

}

例:<div id="test">点击</div>

实现隔3s执行一次的操作:

document.getElementById('test').addEventListener('click', debounce(function() {

console.log('执行完成之后的动作')

}, 3000))

记:事件回调函数里的this指向触发当前事件的DOM元素