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

一、函数式编程定义

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

二、函数式编程特性

无副作用
不可变数据
纯函数
函数组合
函数柯里化

三、看个栗子

计算若干个数之和：

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 方法中传递一个特定功能的函数，来返回一个具备增强能力的新函数。这样我们可以像操作数据那样操作一组函数，使得这些函数具备某些新的能力。

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

四、过程抽象的具体应用

控制函数调用的频率

只调用一次的情况（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的区别

References

函数式编程离我们有多远？
一句话说清楚.throttle和.debounce的区别
实例解析防抖和节流函数