手写防抖-节流-函数柯理化

防抖 =》 短时间中只触发最后一次

• 比如：坐公交车的时候，当车的人满了之后，公交车才出发

节流 =》 短时间中触发少次

• 比如：坐公交车的时候，一个站点停一段事件，再出发

节流：在短时间中，触发大量的事件，对浏览器造成很大压力

使用节流：

     //在最开始的时候,需要定时开始的时间
        let firstTime = 0;
        document.onmousemove = function(e){
            //定义一个时间戳
            let nowTime = +new Date();
            //当当前时间减掉开始的时候小于500毫秒的时候,代码不要执行
            if(nowTime - firstTime < 500){
                return;
            }
            //对于第二次往后,每一次的开始时间,就是上一次的结束时间
            firstTime = nowTime;
            //执行代码
            console.log(1111111);
            console.log(e);
            console.log(1111111);
        }

高阶版节流：

• 将业务代码和节流代码分开
• 封装一个节流
• 短时间中，触发少次的事件

<script>
    //    业务代码
    function fn(e){
        console.group("开始");
        console.log(e);
        console.groupEnd();
    }
    // 封装一个节流
    function throttle(fn,time){
        // 定义初始时间为0
        let firstTime = 0;
        return function(){
            // 获取当前的时间
            let nowTime = +new Date();
            // 当前时间减去初始事件小于设置时间就不执行后续代码
            if(nowTime - firstTime < time){
                return;
            }
            // 每执行一次就将上次的时间赋值给初始时间
            firstTime = nowTime;
            // 执行业务代码 改变this的指向，参数二为参数
            fn.call(this,arguments[0])
        }
    }
    document.onmousemove = throttle(fn,500);
</script>

高阶版防抖：

• 短时间中，触发大量的事件，会对浏览器造成很大压力，短时间中，触发最后一次事件

// 业务代码
        function fun(e) {
            console.group("开始");
            console.log(e);
            console.groupEnd();
        }
        // 获取元素
        const inp = document.querySelector("input");

        // 封装防抖
        function debounce(fn, time) {
            let timer = null;
            return function () {
                // 判断timer 是否有赋值定时器
                if (timer) {
                    // 如果有就清除定时器
                    clearTimeout(timer);
                }
                // 赋值定时器 一段时间后执行
                timer = setTimeout(() => {
                    fn.call(this, arguments[0])
                }, time);
            }
        }
        // 输入事件
        inp.oninput = debounce(fun, 1000)

函数柯理化

• 将一个函数的多个参数当做多个函数的一个参数来执行
• 在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数 (最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。

const password = "123456";
       function fn(pwd){
            return function (newPwd){
                return pwd === newPwd;
            }
       }
       const result = fn(password);
       const r1 = result("1234");
       const r2 = result("12345");
       const r3 = result("123456");
       console.log(r1,r2,r3);
      //封装校验密码的函数 
        //  封装的意义就是为了简化代码的复用