js高阶函数-节流&防抖函数&柯里化

什么是高级函数

高阶函数，就是函数中可以传入另一个函数作为参数的函数。

防抖

防抖： 立即执行和非立即执行；执行一次；经常用于搜索框；

函数的防抖 就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

  // 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

<input type="text">
    <script>
        var ipt = document.getElementsByTagName('input')[0];
        ipt.oninput = debounce(1000,test);

       
        // 封装防抖
        function debounce(time,hanlder){
            // 当触发事件之后 等待一段时间后再触发
            var timer = null;
            return function(){
                clearTimeout(timer);
                var self = this;
                timer = setTimeout(function(){
                    hanlder();
                },time);
            }
        }


        function test(){
            console.log(ipt.value);
        }

防流

节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

  // 节流（throttle）
        // 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。
<div>0</div>
    <button>点我</button>
    <script>
        var btn = document.getElementsByTagName('button')[0];
        var div = document.getElementsByTagName('div')[0];
        // 节流处理
        btn.onclick = thorttle(1000,test);


        function test(){
            // 让div的内容进行累加
            div.innerHTML = Number(div.innerHTML) + 1
        }

        
        function thorttle(time,hanlder){
            var lastTime = 0;
            // 记录每一次点击的时间，判断两次点击之间的间隔时间 >= 1000ms
            return function(){
                var nowTime = new Date().getTime();
                if(nowTime - lastTime >= time){
                    // 让div的内容+1
                    // 让btn的点击事件在一秒内 只能执行一次
                    hanlder();
                    lastTime = nowTime;
                } 
            }
            
        }
    </script>

柯里化

柯里化：把接收多个参数的函数变换成接收一个单一参数的函数（单一参数为多个参数中的第一个），用一句话解释就是，把一个多参数的函数转化为单参数函数的方法。

这是一个普通函数

function plus(x, y){
    return x + y
}
 
plus(1, 2) // 输出 3

经过柯里化后这个函数变成这样：

function plus(y){
    return function (x){
        return x + y
    }
}
 
plus(1)(2) // 输出 3

柯里化函数封装

  function add(a, b, c) {
            return a + b + c;
        }


        // 封装一个柯里化函数
        function curry(fn) {

            return function curryFn() {
                // 1. 一次性将所有参数传完
                // arguments
                if (arguments.length < fn.length) {
                    // 2. 没有一次性传完
                    var _arg = Array.from(arguments);
                    return function () {
                        // 当这个匿名函数被调用时
                        // 看这一传递进来的参数 + 上一次的参数 === fn.length
                        return curryFn(...Array.from(arguments).concat(_arg));
                    }
                }
                return fn(...arguments);
            }
        }
        var curryFn = curry(add);

        // console.log(curryFn(1,2,3)); 输出6
        console.log(curryFn(1, 2)(3));输出6
        console.log(curryFn(1)(2,3))；输出6
        console.log(curryFn(1,2,3,4))；输出6