优雅实现防抖与节流函数

定义

防抖：

防抖是指在一定的时间内再次触发此事件,会清空上次的事件重新开始,如果制定的时间内没有再次触发,那么这个事件才会执行。

节流：

节流是指在一定的时间同一事件只会触发一次,只有超过了这个时间才会再次触发。

使用场景

• 搜索框
• 按钮
• 监听滚动
• 频繁使用鼠标

总的来说：任何东西被频繁的调用都有可能需要防抖或者节流去优化

实现方式

防抖

	function showLog() {
        console.log(‘show‘);
    }

    /*
    * 防抖 思路：
    * 先开启一个定时任务执行，定时任务完成后则清空；当再调用时，如果定时任务仍存在则清空原来任务，创建新的定时任务
    * */
    function debounce(fn, space) {
        let task = null;
        return function (){
            if(task) {
                clearTimeout(task);
            }
            task = setTimeout(fn.apply(this, arguments), space);
        }
    }
    // 使用
    let debounceShowLog = debounce(showLog, 3000);
    debounceShowLog()

节流

 /*
    * 节流 思路：
    * 先开启一个定时任务执行，定时任务完成后则清空，当再调用时，如果定时任务仍存在则不执行任何操作
    * */
    function throttle(fn, space) {
        let task = null;
        return function () {
            if(!task) {
                task = setTimeout(function () {
                    task = null;
                    fn.apply(this, arguments);
                }, space);
            }
        }
    }

    let throttleShowLog = throttle(showLog, 3000);

简单才是真爱

优雅实现防抖与节流函数

原文：https://www.cnblogs.com/bigname/p/13836703.html