看图理解debounce、throttle

实际开发中，一半是使用 API，一半是设计。对于前者，作为纯码农亲自码和在 DataV 中拖拖拽拽搭建大屏本质上区别不大，工具提供的哪些能力(API)我们就使用哪些，而对一些重要 API 的熟悉程度往往影响着搬砖效率，为了早下班不得不多👁👁，好简单点，如果经常忘记 debounce、throttle 哪个是哪个，抽 2 分钟可以看看👇

DataV 是啥？一款来自阿里云研发团队开发的 hin 专业的拖拖拽拽的傻瓜式的灵活的可以一天搭8个大屏高产出的优秀的数据可视化工具👉🏻

打工太卷想财富自由怎么办？买个高版本 DataV 承接各个企业大屏搭建，迎娶白富美走上人生巅峰🐶

正文开始~

两个场景：

• scroll 下滑场景下，在屏幕中显示当前下滑高度，如何避免没必要的疯狂刷新数字？
• 任务列表上方有搜索条件，点击按钮查询当前结果，如何避免按钮不被用户误点多次？

有了需求之后，看下方两个解决方案：

OK，解决方案了解了，如何解决场景需求也恍然大悟了，来，码字👇

debounce

避免短时间内持续重复触发，比如查询，在不修改参数情况下多次触发无意义，因此触发一次就够了

const debounce = (fn, timeout) => {
    let timer;
    return () => {
        clearTimeout(timer);
        timer = setTimeout(fn, timeout);
    }
};

throttle

节流，减少触发频率

const throttle = (fn, time) => {
    let isReady = true;
    return () => {
        if (!isReady) return;
        isReady = false;
        setTimeout(() => { isReady = true; }, time);
        fn();
    }
}

撤退..