zoukankan      html  css  js  c++  java
  • JS防抖函数、节流函数工具类封装

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

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

    /**
     * 防抖函数(可用于防止重复提交)
     * 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,
     * 如果设定时间到来之前,又触发了事件,就重新开始延时。也就是说当一个用户一直触发这个函数,
     * 且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次。
     *
     * @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);
            }
        }
    }

    资源搜索网站大全 http://www.szhdn.com 广州VI设计公司https://www.houdianzi.com

    节流函数

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

    /**
     * 节流函数
     * 当持续触发事件时,保证在一定时间内只调用一次事件处理函数,意思就是说,假设一个用户一直触发这个函数,且每次触发
     * 小于既定值,函数节流会每隔这个时间调用一次
     * 用一句话总结防抖和节流的区别:防抖是将多次执行变为最后一次执行,节流是将多次执行变为每隔一段时间执行
     * 实现函数节流我们主要有两种方法:时间戳和定时器
     *
     * @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;
    }
  • 相关阅读:
    hdu5728 PowMod
    CF1156E Special Segments of Permutation
    CF1182E Product Oriented Recurrence
    CF1082E Increasing Frequency
    CF623B Array GCD
    CF1168B Good Triple
    CF1175E Minimal Segment Cover
    php 正则
    windows 下安装composer
    windows apache "The requested operation has failed" 启动失败
  • 原文地址:https://www.cnblogs.com/qianxiaox/p/14019474.html
Copyright © 2011-2022 走看看