• js、vue防抖函数、节流函数,工具类封装


     防抖函数(可用于防止重复提交)

     当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次, 如果设定时间到来之前,又触发了事件,就重新开始延时。也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次。

    /**
     * 防抖函数(可用于防止重复提交)
     * 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,
     * 如果设定时间到来之前,又触发了事件,就重新开始延时。也就是说当一个用户一直触发这个函数,
     * 且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次。
     *
     * @param func 执行函数
     * @param wait 间隔时间
     * @param immediate 立即执行
     */
    function debounce(fn, wait, immediate) {
        let timer;
        return function() {
            if (timer) clearTimeout(timer);
            if (immediate) {
                // 如果已经执行过,不再执行
                var callNow = !timer;
                timer = setTimeout(() => {
                    timer = null;
                }, wait)
                if (callNow) {
                    fn.apply(this, arguments)
                }
            } else {
                timer = setTimeout(() => {
                    fn.apply(this, arguments)
                }, wait);
            }
        }
    }

     节流函数

    当持续触发事件时,保证在一定时间内只调用一次事件处理函数,意思就是说,假设一个用户一直触发这个函数,且每次触发小于既定值,函数节流会每隔这个时间调用一次
    用一句话总结防抖和节流的区别:防抖是将多次执行变为最后一次执行,节流是将多次执行变为每隔一段时间执行
    实现函数节流我们主要有两种方法:时间戳和定时器

    /**
     * 节流函数
     * 当持续触发事件时,保证在一定时间内只调用一次事件处理函数,意思就是说,假设一个用户一直触发这个函数,且每次触发
     * 小于既定值,函数节流会每隔这个时间调用一次
     * 用一句话总结防抖和节流的区别:防抖是将多次执行变为最后一次执行,节流是将多次执行变为每隔一段时间执行
     * 实现函数节流我们主要有两种方法:时间戳和定时器
     *
     * @param func 执行函数
     * @param wait 间隔时间
     * @param options 立即执行
     * options中  leading:false 表示禁用第一次执行 trailing: false 表示禁用停止触发的回调
     */
    function throttle(fn, wait, options = {}) {
        let timer;
        let previous = 0;
        let throttled = function() {
            let now = +new Date();
            // remaining 不触发下一次函数的剩余时间
            if (!previous && options.leading === false) previous = now;
            let remaining = wait - (now - previous);
            if (remaining < 0) {
                if (timer) {
                    clearTimeout(timer);
                    timer = null;
                }
                previous = now;
                fn.apply(this, arguments)
            } else if (!timer && options.trailing !== false) {
                timer = setTimeout(() => {
                    previous = options.leading === false ? 0 : new Date().getTime();
                    timer = null;
                    fn.apply(this, arguments);
                }, remaining);
            }
        }
        return throttled;
    }
  • 相关阅读:
    14.6 将运算分组为事务
    Android 取得 ListView中每个Item项目的值
    【编程题目】n 个骰子的点数
    【编程题目】扑克牌的顺子
    【编程题目】颠倒栈☆
    【编程题目】输出 1 到最大的 N 位数
    【编程题目】寻找丑数
    【编程题目】在字符串中删除特定的字符
    【编程题目】复杂链表的复制☆
    【编程题目】找出数组中两个只出现一次的数字 ★★(自己没做出来)
  • 原文地址:https://www.cnblogs.com/sunshouguo/p/11727742.html
Copyright © 2020-2023  润新知