防抖与节流的通俗解释

防抖

用自动门来类比，我们在通过自动门的时候，当门检测到人通过之后，会先保持开启状态约 15 秒钟，如果在这 15 秒之内，再没有人通过，那么门会自动关上。
但是，如果在这 15 秒之内不断有人通过，自动门在确认最后一个人通过 15 秒之后，才会关门。

对于自动门来说，不断通过的人就是抖动，所以有 15 秒的时间来进行防抖。

我们用 lodash 来实现这个机制就是：

const WAIT_TIME = 15 * 1000;

function closed(){
    console.log('门关了);
}

function  close = _.debounce(closed, COLD_TIME);

节流

玩过 moba 游戏（比如王者荣耀）的都知道，很多英雄的被动都有一个冷却时间，在这个冷却时间内，被动技能只能触发一次。比如项羽的被动：

陷阵之志：
冷却值：120秒
被动：当生命低于30%，项羽可在6秒内获得30%伤害与40%免伤加成，此效果有120秒CD

意思就是说在项羽在挨揍的时候，从血量掉到30%以下触发被动效果。同时，这一刻开始，往后的 120 秒内都不能再触发被动了，哪怕这120秒内被打死了，都不会获得被动。

我们用 lodash 来实现这个机制就是：

const COOL_DOWN = 120 * 1000;

function buff (){
    console.log('获得30%伤害与40%免伤加成');
}

function  passive = _.throttle(buff, COOL_DOWN); //被动技能

总结

所以，从目的来讲，防抖是为了避免用户误操作触发的尴尬，节流是为了限制用户想连续触发的意图。

XiaoPingYuan