防抖和节流是用来做什么的?
当一个页面或者一个功能模块中,在频繁的发生改变,在频繁的更新DOM,发送请求……也就是说,在频繁的操作,出于对页面的优化和性能的提升,而出现的一种方法
什么是防抖?
只有当你的操作停止一段时间后,这时,我才会以为你的操作停止了,我才会去更新DOM或者发送请求,话不多说,直接上代码:简单的实现
function debounce(fn, delay) {
let trmer = null
return function (...arg) {
clearTimeout(trmer)
trmer = setTimeout(() => {
fn(...arg)
}, delay)
}
}
什么是节流?
不管你当前在不在操作,到时间了,我都要更新DOM或者做一些预定好的操作,话不多说,直接上代码:简单的实现
function throttle(fn, delay) {
let trmer = null
return function (...arg) {
if (!trmer) {
trmer = setTimeout(() => {
fn(...arg)
trmer = null
}, delay)
}
}
}
他们应用场景:
1.为了解决开发过程中遇到性能问题,常见于onscroll、onresize,频繁点击button等
2.一般可以使用在用户输入停止一段时间过后再去获取数据,而不是每次输入都去获取