防抖与节流

防抖与节流是面试中经常会问到的问题，但是第一次看到这个东西以为是比较复杂的知识点，但是经过几分钟的学习，发现这不就是个简单的函数处理嘛！！！

一、函数防抖（debounce）

                在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

               没有实现防抖：

 const input = document.querySelector('.input');
        input.addEventListener('input', function(){
            console.log('发送请求')
        })

                一般情况下，监听输入框只要输入一个数字，就会发一次请求，不仅从资源上来说是很浪费的行为，而且实际应用中，用户也是输出完整的字符后，才会请求！！！

 const input = document.querySelector('.input');
        // 用户输入完毕的时候, 才发送一次 http
        function debounce(fn, delay) {
            let timer = null;
            return function () {
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(() => {
                    fn();
                }, delay)
            }
        }

        input.addEventListener('input', debounce(() => {
            console.log('发送请求');
        }, 1000))

相当于每次输入内容，就会开启计时器，如果在规定时间内没有其他内容输入，就调用请求，如果还有其他内容输入就重新开始计时！！！

二、函数节流（throttle）

                规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

 //  节流 : 一段时间内,只执行一次这个操作;过了段时间如果还要操作的话,继续执行新的操作
        const box = document.querySelector('.box');

        function throttle(fn, delay) {
            let timer = null;
            return function () {
                if (timer) {
                    return;
                }
                timer = setTimeout(() => {
                    fn();
                    timer = null;
                }, delay)
            }

        }

        box.addEventListener('drag', throttle((e) => {
            // console.log(e.offsetX, e.offsetY);
            console.log('节流');
        }, delay))

 一段时间内只能执行一次这种操作，这个时间过之后，会接着执行新的操作

使用场景

• 防抖debounce

  • search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
  • window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

• 节流throttle

  • 鼠标不断点击触发，mousedown(单位时间内只触发一次)
  • 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

这个只是我浅显的一些理解，早会早轻松！！！