防抖和节流

防抖(debounce)

函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

    <input type="text" id="input">
    <script>
        let inp = document.getElementById('input');
        let debounceInput = debounce(getInput, 1000);
        inp.addEventListener('keyup', function (e) {
            debounceInput(e.target.value)
        })

        function getInput(value) {
            console.log(`输出的内容是${value}`);
        }
        //fun:要执行的函数 delay:延迟时间
        //es5
        function debounce(fun, delay) {
            let timer;
            return function (arge) {
                let that=this;
                clearInterval(timer);
                timer = setInterval(function(){
                    fun.call(that,arge)
            }, delay)}
        }
        //es6
        function debounce(fun, delay) {
            let timer;
            return function (arge) {
                clearInterval(timer);
                timer = setInterval(() =>fun(arge), delay)
            }
        }
    </script>

节流（throttle）

函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

   <button id="btn">点击刷新</button>
    <script>
        document.getElementById('btn').onclick = throttle(handel, 1000);
        function handel() {
            console.log(Math.random());
        }
        function throttle(fun, wait) {
            let timeout;
            return function () {
                if (!timeout) {
                    timeout = setTimeout(() => {
                        timeout = null;
                        fun(arguments)
                    }, wait)
                }
            }
        }
        //arguments实参
        function fun(){
            console.log(arguments);
        }
        fun([1,2,3,4])
    </script>