节流函数

节流函数原理

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

适用场景

1. 拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动
2. 缩放场景：控制浏览器resize
3. 动画场景：避免短时间内多次触发动画引起性能问题

函数实现

/**
* 节流函数
*/
const throttle = (fn, delay = 500) => {
    let flag = true;
    return (..args) => {
        if (!flag) {
            return
        }
        flag = false;
        setTimeout(() => {
            flag = true;
            fn.apply(this, args);
        }, delay);
    }
}复制代码

 

 

参考资料

1. www.cxymsg.com/guide/

微信公众号“前端那些事儿”