前端节流、防抖函数
节流
什么是节流?
节流就是同一个事件 一秒钟他执行了很多次。但是我不想他执行这么多次,我只想让他执行一次 或者两次。
那该怎么办? why baby why
那我想就是他执行的时候 我就设置一个定时器,如果定时器是空的,等会就去给你执行。如果你前面执行了马上又去执行,那不好意思你上次的都还没去执行,那这次我肯定不会去执行。定时器有值,那我就等上次执行了再去执行。
let timer = null;
const handleMouseMove = function (func, timeMs = 100) {if (timer) {// return //节流clearTimeout(timer); //防抖}timer = setTimeout(() => {func();timer = null;}, timeMs);
};
防抖
什么是防抖?
防抖就是同一个事件 一秒钟他执行了很多次。但是我只想让他没一直点击(执行)的时候才去 执行,就是你皮等你皮,等你累了,听话了我再去帮你办事
那该怎么办? why baby why
那我想就是他执行的时候,我就看你累了没 听话了不,如果听话 那我执行,不听话 你一直点 我就一直不去执行。
let timer = null;
const handleMouseMove = function (func, timeMs = 100) {if (timer) {return //节流//clearTimeout(timer); //防抖}timer = setTimeout(() => {func();timer = null;}, timeMs);
};
发现节流和防抖代码居然只有一行不同,这是为啥
- 节流 如果time里面的定时器函数未执行 已经在队列的时候 等待他执行了后再去执行
- 防抖 如果timer里面的定时器函数未执行 timer有值直接清除定时器 不让定时器函数执行上次未执行的代码块 然后再次调用定时器,等待执行