防抖多列表的骚操作

看好了，这是一个防抖，对吧~~

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)
    }
}