【性能优化】前置后置节流防抖,防止不避免情况下重复触发

 本文主要记录分享下 性能优化 中在 不可避免 情况下重复请求或者重复调用方法下的前置后置 节流防抖 的处理方式,以下为js版本其他语言可以 参考 类似。

优化效果

 以下是优化前后对比截图。

优化前

【性能优化】前置后置节流防抖,防止不避免情况下重复触发

优化后

【性能优化】前置后置节流防抖,防止不避免情况下重复触发

优化方法

 主要分享一下两种方式前置和后置

前置节流防抖


    /**
     * 前置节流防抖
     * @param func
     * @param delay
     * @returns {function(): *}
     */
    window.beforeThrottle = function (func, delay) {
        let lastCall = 0;
        return function () {
            const now = Date.now();
            if (now - lastCall < delay) {
                return;
            }
            lastCall = now;
            return func.apply(this, arguments);
        };
    }

后置节流防抖

  /**
     * 后置节流防抖
     * @param func
     * @param delay
     * @returns {(function(): void)|*}
     */
    window.laterThrottle = function (func, delay) {
        let lastCall;
        return function () {
            clearTimeout(lastCall);
            let that = this;
            lastCall = setTimeout(function () {
                func.apply(that, arguments);
            }, delay);
        }
    }

 前置主要是以第一次请求数据为主,后置主要以最后一次请求数据为主。

 以上就是关于性能优化前置后置节流防抖,防止不避免情况下重复触发的优化方案,有兴趣的可以尝试下,如果有更好的方案可以评论区分享下。

给TA打赏
共{{data.count}}人
人已打赏
运维

项目性能优化的指标,目标

2024-11-22 11:58:30

运维

阿里巴巴 MySQL binlog 增量订阅&消费组件支持多语言客户端

2024-11-22 11:58:32

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索