| 操作 | 描述 | 场景 |
|---|---|---|
| 防抖 | 频繁去触发一个事件，但是只触发最后一次。以最后一次为准 | 1、电脑息屏时间，每动一次电脑又重新计算时间 |
| 2、input 框变化频繁触发事件可加防抖 | ||
| 3、频繁点击按钮提交表单可加防抖 | ||
| 节流 | 频繁去触发一个事件，但是只能每隔一段时间触发一次 | 1、滚动频繁请求列表可加节流 |
| 2、技能CD |
function debounce(fn, delay) {
let timer = null;
return function() {
if (timer) window.clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null; // 当一个对象被赋值了null 以后，原来的对象在内存中就处于游离状态，GC 会择机回收该对象并释放内存。因此，如果需要释放某个对象，就将变量设置为null，即表示该对象已经被清空，目前无效状态。
}, delay);
}
}
function debounce(fn, delay, triggerNow) {
let timer = null;
return function() {
if (timer) window.clearTimeout(timer);
if (triggerNow) {
let exec = !timer;
timer = setTimeout(() => {
timer = null;
}, delay);
if (exec) {
fn.apply(this, arguments);
}
} else {
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay);
}
}
}
function throttle(fn, delay) {
let canUse = true;
return function() {
if (canUse) {
fn.apply(this, arguments);
canUse = false;
setTimeout(() => canUse = true, delay);
}
}
}
高阶函数：英文叫Higher-order function。JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。
// 简单的高阶函数
function add(x, y, f) {
return f(x) + f(y);
}
//用代码验证一下：
add(-5, 6, Math.abs); // 11
像数组的 map、reduce、filter 这些都是高阶函数
柯里化，英语：Currying(果然是满满的英译中的既视感)，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。
// 普通的add函数
function add(x, y) {
return x + y
}
// Currying后
function curryingAdd(x) {
return function (y) {
return x + y
}
}
add(1, 2) // 3
curryingAdd(1)(2) // 3
// 正常正则验证字符串 reg.test(txt)
// 普通情况
function check(reg, txt) {
return reg.test(txt)
}
check(/\\d+/g, 'test') //false
check(/[a-z]+/g, 'test') //true
// Currying后
function curryingCheck(reg) {
return function(txt) {
return reg.test(txt)
}
}
var hasNumber = curryingCheck(/\\d+/g)
var hasLetter = curryingCheck(/[a-z]+/g)
hasNumber('test1') // true
hasNumber('testtest') // false
hasLetter('21212') // false
Function.prototype.bind 就是科里化的实现例子function sayKey(key) {
console.log(this[key])
}
const person = {
name: 'Sunshine_Lin',
age: 23
}
// call不是科里化
sayKey.call(person, 'name') // 立即输出 Sunshine_Lin
sayKey.call(person, 'age') // 立即输出 23
// bind是科里化
const say = sayKey.bind(person) // 不执行
// 想执行再执行
say('name') // Sunshine_Lin
say('age') // 23
柯理化函数含义：是给函数分步传递参数，每次传递部分参数，并返回一个更具体的函数接收剩下的参数，这中间可嵌套多层这样的接收部分参数的函数，直至返回最后结果。
// add的参数不固定，看有几个数字累计相加
function add (a,b,c,d) {
return a+b+c+d
}
function currying (fn, ...args) {
// fn.length 回调函数的参数的总和
// args.length currying函数 后面的参数总和
// 如：add (a,b,c,d) currying(add,1,2,3,4)
if (fn.length === args.length) {
return fn(...args)
} else {
// 继续分步传递参数 newArgs 新一次传递的参数
return function anonymous(...newArgs) {
// 将先传递的参数和后传递的参数 结合在一起
let allArgs = [...args, ...newArgs]
return currying(fn, ...allArgs)
}
}
}
let fn1 = currying(add, 1, 2) // 3
let fn2 = fn1(3) // 6
let fn3 = fn2(4) // 10
来源：https://juejin.im/post/6870319532955828231