利用函数式编程封装节流和防抖函数

一、函数式编程定义

"函数式编程"是一种编程范式，也就是如何编写程序的方法论。主要思想是把运算过程尽量写成一系列嵌套的函数调用。即函数式编程要求使用函数，把运算过程定义为不同的函数。

二、函数式编程特性

• 无副作用

• 不可变数据

• 纯函数

• 函数组合

• 函数柯里化

三、看个栗子

计算若干个数之和：

function add(x, y) {    return x + y;
}function Reduce(...args) {    // 返回值
    return args.reduce(add);
}console.log(Reduce(1,2,3));

计算若干数之间的乘积：

function mul(x, y) {    return x * y;
}function Reduce(...args) {    // 返回值
    return args.reduce(mul);
}console.log(Reduce(1,2,3));

若干个数组的拼接：

function concat(x, y) {    return x.concat(y);
}function Reduce(...args) {    // 返回值
    return args.reduce(concat);
}console.log(Reduce([1,2],[5,6]));

可以看到，如果我们还有更多类似函数，我们还得对 Reduce 函数进行改写。

至此，我们完全可以一次性抽取出一个通用的版本 Reduce ：

function Reduce(fn) {    return function (...args){        return args.reduce(fn.bind(this));
    }
}let add = Reduce((x, y) => x + y);// wrong: let add = iterative((x, y) =>{ x + y});console.log(add(1,2,3));

通过向 Reduce 方法中传递一个特定功能的函数，来返回一个具备增强能力的新函数。这样我们可以像操作数据那样操作一组函数，使得这些函数具备某些新的能力。

这就是过程抽象的基本思想。这些变换函数的函数我们称之为“高阶函数”（它们自身输入函数或返回函数）。

四、过程抽象的具体应用

1. 控制函数调用的频率

• 只调用一次的情况 （exp: 触发点击事件的回调函数限制其只调用一次）

function once(fn) {    return function (...args) {        if(fn) {            let res = fn.apply(this, args);
            fn = null;            return res;
        }
    }
}function foo(idx) {    console.log(idx);
}

foo(1);
foo(2);
foo(3);let foo = once(foo);
foo(11);
foo(22);
foo(33);

场景代码：https://code.h5jun.com/buzi/2/edit?html,js,output

• 每隔一定的时间触发函数的执行；

节流：常用来防止按钮被重复点击，防止 resize、scroll 和 mousemove 事件过于频繁地触发等。

这种方式也可避免定义全局的定时器变量，不会污染该变量。

function throttle(fn, wait=500) {    let timer;    return function (...args) {        if(timer == null) { // undefined == null // true undefined === null //false 这里不要写成 严格相等 不然永远执行不进去
            timer = setTimeout(() => timer = null, wait)            return fn.apply(this, args);
        }
    }
}//限制button在500ms内只能被点击一次://快速连续不停的点击，按钮只会有规律的每500ms点击有效button.addEventListener('click', throttle(() => {    console.log('hhh')
}))// function once(fn) {//  fn = null; 不会改变外部的实参//}//function hh(){alert(11)}//once(hh)//console.log(hh)// function hh(){alert(11)}// 类似于function a(o){
  o = 1; // o.aa = 22;}var obj = {    aa: 11}
a(obj);console.log(obj);

防抖动：希望函数在某些操作执行完成之后被触发。
输入框搜索数据时，为了限制从服务器读取数据的频率，我们可以等待用户输入结束 100ms 之后再触发查询；或者点击提交按钮获取数据，防止频繁的请求数据，限制用户提交完一段时间后再请求数据。（想想这里防抖动与上面节流的区别）

function debounce(fn, wait=500) {    let timer;    return function (...args) {        if(timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            timer = null;            return fn.apply(this, args)
        }, wait)
    }
}// 快速连续不停的点击，永远不会触发，直到停止点击，函数被执行一次button.addEventListener('click', debounce(() => {    console.log('hhh');
    getMoreData();
}))

节流和防抖动都是控制函数在一定时间内的执行次数，例如规定的时间间隔是500ms，如果连续在小于这个时间间隔内调用防抖动函数，该函数永远不会被执行（直到停止点击，触函数触发一次）；而节流函数会在每到达一段间隔的时间内有规律的被执行。

详见一句话说清楚.throttle和.debounce的区别

作者：黎贝卡beka
链接：https://www.jianshu.com/p/c8dcc0afbd1b