阅读数:58 评论数:0

一、防抖

在单位时间内频繁触发事件，只有最后一次生效。

防抖策略（debounce）是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。

1、应用场景

（1）登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖

（2）调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖

（3）文本编辑器实时保存，当无任何更改操作一秒后进行保存

    // 防抖函数
    function debounce(fn, wait) {
        let timer;
        return function() {
            let _this = this;
            let args = arguments;
            if(timer) { clearTimeout(timer) }
            timer = setTimeout(function(){
                fn.apply(_this, args)
            }, wait);      
        }
    }
    // 使用
    window.onresize = debounce(function() {console.log('resize')}, 500)

///////////hook方式
import { ref } from 'vue';

/**
 * 函数防抖处理
 * @param fn
 * @param wait
 * @returns {{run: run}}
 * const { run } = debounceFnHook( fn, 500 )
 */
export default function debounceFnHook(fn,wait) {
    const timer = ref(null);

    const cancel = ()=> timer.value&&clearTimeout(timer.value);

    const run = (...args)=>{
        cancel();
        timer.value = setTimeout(()=>fn(...args),wait);
    };

    return {
        run,
    }
}

二、节流

在单位时间内频繁触发事件，只有第一次生效。

节流策略（throttle），控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (Rate Limit) 类似。

1、节流的应用场景

（1）鼠标连续不断地触发某事件（如点击），单位时间内只触发一次；

（2）监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。例如：懒加载；

（3）浏览器播放事件，每个一秒计算一次进度信息等

    // 方式1: 使用时间戳
    function throttle1(fn, wait) {
        let time = 0;
        return function() {
            let _this = this;
            let args = arguments;
            let now = Date.now()
            if(now - time > wait) {
                fn.apply(_this, args);
                time = now;
            }
        }
    }
    
    // 方式2: 使用定时器
    function thorttle2(fn, wait) {
        let timer;
        return function () {
            let _this = this;
            let args = arguments;
            
            if(!timer) {
                timer = setTimeout(function(){
                    timer = null;
                    fn.apply(_this, args)
                }, wait)
            }
        }
    }
////////hook方式
import { ref } from 'vue';

/**
 * 函数节流处理
 * @param fn
 * @param wait
 * @returns {{run: run}}
 * const { run } = throttleFnHook( fn, 500 )
 */
export default function throttleFnHook(fn,wait) {
    const timer = ref(null);

    const run = (...args)=>{
        if(!timer.value){
            timer.value = setTimeout(()=>{
                timer.value = null;
                fn(...args);
            },wait);
        }
    };

    return {
        run,
    }
}