javascript - 去抖一个方法，但继续合并和内存参数

Question

我有一个这样定义的方法

updateHook(obj) {
  // update the item
}
// https://www.npmjs.com/package/throttle-debounce
const update = debounce(updateHook, 2000);

如果在 2 秒内多次调用该方法，我想合并所有参数并调用一次

update({ name: 'abc' }); // first call
update({ city: 'def' }); // second call
update({ cell: 123 }); // third call
.... ~2 seconds
// should send one call to update with all the params merged like
update({ name: 'abc', city: 'def', cell: 123 });

注意:它不需要使用去抖动，要求是如果在 2 秒的时间段内多次调用该方法，我只想调用具有合并参数的方法。

Answer 1

您可以编写自己的高阶函数，使用合并的参数调用给定函数(参见下面示例中的merge)。

这里最大的问题是 (IMO) merge 函数对要传递的参数做出了非常强的假设。
您需要自己判断是需要高度通用的实现还是非常具体的实现。

const {debounce} = throttleDebounce;

const merge = (fn) => {
    let merge = {};

    return (obj) => {
        merge = {...merge, ...obj};
        fn(merge);
    };
};

const updateHook = (obj) => {
    console.log(obj);
}

const update = merge(debounce(2000, updateHook));

update({ name: 'abc' });
update({ city: 'def' });
update({ cell: 123 });

<script src="https://unpkg.com/throttle-debounce@3.0.1/umd/index.js"></script>

---

另一个问题是可能需要在某个时候重置合并功能。如果这应该与去抖超时相关联，那么您可能需要一个专门的去抖工厂。

const {debounce} = throttleDebounce;

const updateHook = (obj) => {
    console.log(obj);
}

const mergedDebounce = (delay, callback) => {
    let merged = {};

    const debounced = debounce(delay, () => {
        callback(merged);
        merged = {};
    });

    return (obj) => {
        merged = {...merged, ...obj};
        debounced(merged);
    };
};

const update = mergedDebounce(2000, updateHook);

update({ name: 'abc' }); // first call
update({ city: 'def' }); // second call
update({ cell: 123 }); // third call

setTimeout(() => {
    update({ foo: 42 }); // fourth call
}, 2500);

<script src="https://unpkg.com/throttle-debounce@3.0.1/umd/index.js"></script>