防抖和节流

---

前言

防抖和节流都是为了优化页面性能，避免因频繁触发函数而导致的性能浪费以及不必要的网络请求。二者的原理和应用略有不同。

---

一、防抖函数

1.1什么是防抖

防抖(debounce)的基本思路是:如果短时间内连续触发同一个函数,那么只执行最后一次操作,以达到稳定的效果

1.2使用场景

例如:当用户在搜索框中输入关键字的过程中,我们希望最终只查询一次,而不是每输入一个字符就查询一次,这时候我们就可以运用防抖函数来避免被频繁地调

• 输入框输入验证
• 鼠标拖拽事件
• 窗口大小改变事件
• 按钮提交事件

1.3实现思路-代码实现

防抖的实现思路是:设置一个延迟函数,当触发事件,如果在设置的时间内再次触发事件,则清楚延迟函数并重新设定一个新的延迟函数,直到一定时间内没有再次触发事件,再执行函数

	    /***
     * fn:需要进行设置防抖的函数
     * delay:需要设置的时间间隔
    */
    function debounce (fn, delay) {
        let timer = null;
        return function () {
            let context = this,
                args = arguments;
            clearTimeout(timer);
            timer = setTimeout(function () {
                fn.apply(context, args);
            }, delay);
        };
    }

二、节流函数

2.1什么是节流

节流(throttle)的基本思路是:如果短时间内连续触发同一个函数,那么只执行一次操作,后续操作将被忽略一段时间

2.2使用场景

例如:在用户滚动页面的过程中,我们希望在一段时间内只执行一次页面元素的加载函数,而不是每次滚动斗加载一次.这时我们就可以运用节流避免该函数被频繁地调用

• 页面滚动事件
• 鼠标移动事件
• 按钮点击事件

2.3 实现思路-代码实现

节流地实现思路:设置一个时间戳,当触发事件时,如果当前时间和时间戳之间差值大于设置地时间间隔,则执行函数并更新时间戳为当前时间

    /***
     * fn:需要进行设置节流的函数
     * delay:需要设置的时间间隔
    */
    function throttle (fn, delay) {
        let timer = null,
            lastTime = 0;
        return function () {
            let context = this,
                args = arguments,
                now = new Date().getTime();
            if (now - lastTime - delay > 0) {
                if (timer) {
                    clearTimeout(timer);
                    timer = null;
                }
                lastTime = now;
                fn.apply(context, args);
            } else if (!timer) {
                timer = setTimeout(function () {
                    lastTime = new Date().getTime();
                    timer = null;
                    fn.apply(context, args);
                }, delay);
            }
        };
    }