• 可封装的方法


    1.如何定义一个最大值和最小值,每次需要时返回这两者之间的数值

    Math.floor(Math.random() * (this.maxData - this.minData + 1) + this.minData)
    

    2.防抖

    let timeout = null;
    
    /**
     * 防抖原理:一定时间内,只有最后一次操作,再过wait毫秒后才执行函数
     * 
     * @param {Function} func 要执行的回调函数 
     * @param {Number} wait 延时的时间
     * @param {Boolean} immediate 是否立即执行 
     * @return null
     */
    function debounce(func, wait = 500, immediate = false) {
        // 清除定时器
        if (timeout !== null) clearTimeout(timeout);
        // 立即执行,此类情况一般用不到
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(function() {
                timeout = null;
            }, wait);
            if (callNow) typeof func === 'function' && func();
        } else {
            // 设置定时器,当最后一次操作后,timeout不会再被清除,所以在延时wait毫秒后执行func回调方法
            timeout = setTimeout(function() {
                typeof func === 'function' && func();
            }, wait);
        }
    }
    
    export default debounce

    3.节流

    let timer, flag;
    /**
     * 节流原理:在一定时间内,只能触发一次
     * 
     * @param {Function} func 要执行的回调函数 
     * @param {Number} wait 延时的时间
     * @param {Boolean} immediate 是否立即执行
     * @return null
     */
    function throttle(func, wait = 500, immediate = true) {
        if (immediate) {
            if (!flag) {
                flag = true;
                // 如果是立即执行,则在wait毫秒内开始时执行
                typeof func === 'function' && func();
                timer = setTimeout(() => {
                    flag = false;
                }, wait);
            }
        } else {
            if (!flag) {
                flag = true
                // 如果是非立即执行,则在wait毫秒内的结束处执行
                timer = setTimeout(() => {
                    flag = false
                    typeof func === 'function' && func();
                }, wait);
            }
            
        }
    };
    export default throttle

     

  • 相关阅读:
    如何掌握所有的程序语言
    程序与证明
    卫星通信地面系统构成
    SCIP 环境搭建
    Homebrew install.sh
    macOS 内核之从 I/O Kit 电量管理开始
    matlab练习程序(空间椭圆拟合)
    多进程抢票加锁
    进程间数据传递
    队列用法
  • 原文地址:https://www.cnblogs.com/lizhao123/p/14244953.html
Copyright © 2020-2023  润新知