JavaScript高阶函数 | 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 3 天

课程重点

1. 过程抽象概念
2. 高阶函数使用模式
3. JavaScript 编程范式

详细知识点介绍

高阶函数（HOF）介绍

以函数作为参数

以函数作为返回值

常用于作为函数装饰器

常见的高阶函数

Once

用于只需要执行一次的函数

function once(fn) {
    return function(...args) {
        if(fn) {
            const ret = fn.apply(this, args);
            fn = null;
            return ret;
        }
    }
}

使用方法：

const print = (content) => {
    console.log(content)
}

const printOnce = once(print)

printOnce("1") // 输出 1
printOnce("2") // 不输出

常用于只需要执行一次的的事件侦听器（也可以使用事件侦听器自带的once option，或者手动在执行后移除侦听器）

节流（Throttle）

如果快速调用函数，那么只有第一次能成功调用函数，之后时间间隔之内的调用会被忽略。常用于滚动条事件/瀑布流无限滚动的场景（限制函数调用频率，保证一段时间内函数只调用一次）

function throttle(fn, time = 500) {
    let timer = null;
    return function (...args) {
        if (timer) return;
        fn.apply(this, args);
        timer = setTimeout(() => {
            timer = null;
        }, time);
    }
}

简单做了个图，蓝色代表执行节流函数，红色代表成功执行，当节流函数持续调用时，原函数也会以一定的时间间隔持续执行

防抖（debounce）

当在时间间隔之内快速调用函数时，函数将始终没法执行，直到停止后，函数才会被执行。常用于一些文本输入的场景（比如搜索框停止输入后，展示联想词；文章编辑器中，输入停止后，进行草稿的保存）。

function debounce(fn, time = 500) {
    let timer = null;
    return function (...args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, args);
        }, time);
    }
}

同样的，防抖函数示意图大概长下面这样，只有在调用结束后，函数才会被执行

Consumer

从名字也很好理解，当快速点击时，函数并不会立刻被调用，而是先将任务推入列表，然后在一定时间后一个一个消费掉。

function consumer(fn, time = 500) {
    let tasks = [];
    let timer = null;
    return function (...args) {
        tasks.push(args);
        if (timer) return;
        timer = setInterval(() => {
            fn.apply(this, tasks.shift());
            if (tasks.length === 0) {
                clearInterval(timer);
                timer = null;
            }
        }, time)
    }
}

实践练习例子

写了一些小例子（可能有虫，不过大体上的趋势应该没什么问题）

Once

Throttle

Debounce

Consumer