什么是防抖和节流?有什么区别?如何实现?

微信扫一扫,分享到朋友圈

什么是防抖和节流?有什么区别?如何实现?

什么是防抖和节流?有什么区别?如何实现?

1. 防抖

高频率事件在n秒内只触发一次,如果再次被触发,则重新计时

  • 方案

设置定时器,当n秒内再次被触发,则清除定时器。

<button id="btn">提交</button>
<script >
document.getElementById('btn').addEventListener('click', submit)
function submit(){
console.log('请求数据')
}
</script>

上面是最简单的提交按钮,现在的需求是点击按钮,请求后台的数据。

document.getElementById('btn').addEventListener('click', debounce)
let timer = null
function debounce(){
clearTimeout(timer)
timer = setTimeout(function() {
submit()
}, 1000)
}
function submit(){
console.log('请求数据')
}

上面实现了最基本的 需求,现在有点不好,就是我们定义了一个全局变量。基于尽可能少的定义全局变量,我们将

变量放入debounce 函数的内部

可以做以下实现

document.getElementById('btn').addEventListener('click', debounce(submit))
function debounce(fn){
let timer = null
return function() {
clearTimeout(timer)
timer = setTimeout(function() {
fn()
}, 1000)
}
}
function submit(){
console.log('请求数据')
}

这里是基于闭包实现的,按钮element 监听了 click事件,并执行debounce方法,debounce方法又返回一个新函数

,这里的timer 就会一直存在,不被销毁,因为函数被外部引用。

所以下次点击的时候timer 还是存在,我们点击的时候首先会clearTimeout,也就是取消上次的请求。

2.节流

高频率事件在n秒内只触发一次,n秒内不再触发。

  • 方案

还是基于上面的例子

document.getElementById('btn').addEventListener('click', throttle)
let flag = true
function throttle(){
if (!flag) return
flag = false
setTimeout(function(){
submit()
flag = true
},1000)
}
function submit(){
console.log('请求数据')
}

上面定义了一个标记flag 表示当前函数执行状态,如果以及过了1秒,请求数据执行后,我们将flag设置成true,

document.getElementById('btn').addEventListener('click', throttle(submit))
function throttle(fn){
let flag = true
return function() {
if (!flag) return
flag = false
setTimeout(function(){
fn()
flag = true
},1000)
}
}
function submit(){
console.log('请求数据')
}

微信扫一扫,分享到朋友圈

什么是防抖和节流?有什么区别?如何实现?

SQLECTRON-超轻量级SQL客户端

上一篇

Unsafe介绍及CAS原理解析

下一篇

你也可能喜欢

什么是防抖和节流?有什么区别?如何实现?

长按储存图像,分享给朋友