面试题---什么是防抖和节流？有什么区别？如何实现？

防抖
概念： 触发高频事件秒内函数只会执行一次，如果n秒内高频事件再次触发，则重新计算设时间。
列如：搜索框搜索东西

  function debounce(fn) {
            let timeout = null; //创建一个标记用来存放定时器的返回值

            return function() {
                clearInterval(timeout); //每个用户输入的时候把一个setTimeout clear 掉
                timeout = setTimeout(() => { //然后又创建一个新的setTimeout,这样就能保证输入字后的input间隔内如果还有字输入的话，就不会执行
                    fn.apply(this, arguments)
                }, 500);
            }
        }

        function sayHi() {
            console.log('防抖成功');
        }

        let inp = document.getElementById('inp');
        inp.addEventListener("input", debounce(sayHi));

节流
概念：高频事件触发，但在n秒内只执行一次，所以节流就会稀释函数的执行频率。

function throttle(fn) {

            let canRun = true; //通过闭包保存一个标记

            return function() {
                if (!canRun) return

                canRun = false;
                setTimeout(() => {
                    fn.apply(this, arguments);
                    canRun = true;

                }, 500);
            }
        }

        function sayHi(e) {
            console.log(e.target.innerWidth, e.target.innerHeight);
        }
        window.addEventListener('resize', throttle(sayHi));