防抖与节流的通俗解释

2019-07-28

防抖

用自动门来类比,我们在通过自动门的时候,当门检测到人通过之后,会先保持开启状态约 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 COLD_TIME = 120 * 1000;

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

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

总结

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


文档信息 by XiaoPingYuan

版权声明:自由转载-非商用-非衍生-保持署名。发表日期:2019-07-28 by XiaoPingYuan(https://xesam.github.io/)