# 防抖多列表的骚操作
看好了,这是一个防抖,对吧~~
function debounce(fn, interval) {
let timer = null;
return function (...args) {
if(timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, interval);
}
}
现在有一个需求:看下面的图片,每次增减数量的时候都需要发起请求,每个列表的需要请求的数据不一致,使用以上的防抖会导致:
如果我在防抖时间之内连续点击多个列表,那么结果可想而知,只会请求最后一个点击的。
因为函数指向的作用域处于同一个
那么,该怎么办呢~~
目前重构的新项目,使用原生JS开发的,没有用框架之类的,更没有组件可用,所以只能来改造防抖这个全局方法
这时候,万能的对象就来了~
把不同方法名 or 指定值,作为属性存起来,作为公共的方法,同一组里面的列表来指定不同属性值,这样就不会互相影响,各玩各的
<ul style="margin: 70px;">
<li data-id="1">1111111</li>
<li data-id="2">2222222</li>
<li data-id="3">3333333</li>
<li data-id="4">4444444</li>
<li data-id="5">5555555</li>
</ul>
function sayHi(id){ console.log('hi', id) }
const oLi = document.querySelectorAll('li')
for(let i = 0; i < oLi.length; i++){
oLi[i].addEventListener('click', function(){
const id = this.getAttribute('data-id');
debounce(sayHi, 1000, id)(id)
})
}
// 完整代码
const timeout = {}
function debounce(fn, interval, type) {
// 优先使用指定值作为属性,否则就用方法名
const name = type ? type : fn.name;
return function () {
// 清除指定属性的定时器,再重新赋值
clearTimeout(timeout[name])
timeout[name] = setTimeout(() => {
fn.apply(this, arguments);
}, interval)
}
}