zoukankan      html  css  js  c++  java
  • 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;
    }
  • 相关阅读:
    使用自制事务进行异常信息的记录:Autonomous transactionslog
    backup methodsexp and imp
    一个 SQL 同时验证帐号是否存在、密码是否正确
    使用存储过程进行分页:page by Procedure
    推荐一款类似于editplus的文本编辑工具:note++
    myeclipse8.5反编译插件的安装使用jdgui插件
    [转]JavaMail的使用之邮件发送 详解
    Thinking in java中内部类的例子。
    [转]tomcat6.0下的log4j日志文件配置过程
    127.X.X.X開頭的網路都是特殊用途的嗎!?
  • 原文地址:https://www.cnblogs.com/sunshouguo/p/11727742.html
Copyright © 2011-2022 走看看