高阶函数实现防抖和节流

1.防抖：高频事件在被触发一段时间之后再执行回调；

2.节流：高频事件在被触发一段时间内只执行一次；

3.高阶函数是一个接收函数作为参数或将函数作为输出返回的函数。

说完了概念，现在来实现代码：

高阶函数实现防抖：

function debounce(fn,wait){

      //闭包缓存变量

      let timeout = null;

      return function () {

        if(timeout){

          //清除定时器

          clearTimeout(timeout)

        }

        timeout = setTimeout(fn,wait);

      }

    }

使用举例：

<input id="search"/>

function search(){

        console.log("search.....")

}

document.querySelector("#search").addEventListener('input', debounce(search, 300))

高阶函数实现节流：

function throttle(fn, delay) {

            var timer = null;

            var start = Date.now();

            return function () {

                var remain = delay - (Date.now() - start);

                timer != null && clearTimeout(timer);

                // 如果剩余时间小于0，就立刻执行

                if (remain <= 0) {

                    fn();

                    start = Date.now();

                } else {

                    timer = setTimeout(fn, remain);

                }

            }

        }

使用举例：

function scroll(){

        console("scroll...")

}

document.addEventListener('scroll', debounce(scroll, 300))