防抖与节流

作用：

防抖（Debounce）：用户触发比较频繁，只要执行最后一次时间的操作。
节流（Throttle）：用户触发比较频繁，控制高频率执行次数。

防抖（Debounce）和节流（Throttle）都是用来控制某个函数在一定时间内触发次数，两者都是为了减少触发频率，以便提高性能以及避免资源浪费。

1、防抖函数

         function debounce(fn, delay) {//第一个参数为回调函数、第二个为定时器事件
            let timer = null;
            return function () {
                //防抖代码
                if (timer != null) {
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    fn.call(this);   //call方法改变this指向。
                }, delay)
            }
        }

2、节流函数

        function throttle(fn, delay) {
            let flag = true;
            return function () {
                if (flag) {
                    setTimeout(() => {
                        fn.call(this);
                        flag = true;
                    }, delay)
                }
                flag = false;
            }
        }

使用场景

• 防抖 —— 表单元素的校验，如手机号，邮箱，用户名等，部分搜索功能的模糊查询结果实现
• 节流 —— 鼠标的跟随动画实现，scroll，resize, touchmove, mousemove等极易持续性促发事件的相关动画问题，降低频率