先创建一个不断执行的函数
先不要管什么叫“函数节流”和“函数防抖”，咱们先创建一个不断执行的函数。
现在有个函数，它的作用是打印1/2/3/4/5/6/7……，每1秒打印一次。
这里运用到了闭包，正好普及一下闭包的知识。闭包就是一个函数和它所在的函数环境的统称，函数能始终引用函数环境里的常量和变量。print里的匿名函数和匿名函数所在的函数环境就叫闭包。它可以保证i不被销毁。
变量p的值就是这个闭包。重复执行p，就会不断打印递增的阿拉伯数字。
然后我们另做一个函数run，函数内容就是个定时器，定时执行传入的操作。
运行下方代码可以见到效果。
function print() {
var i = 0;
return function () {
i += 1;
console.log(i);
return i;
}
}
const p = print();
function run(p) {
const timer = setInterval(() => {
p();
}, 1000);
}
run(p);
也就是说，p是执行体，run保证p不断被执行，这就相当于我们在业务中遇到了一个不断执行的命令，或者可能是不断触发的事件。注意，不断执行的是p，不是run，run只是负责模拟一个不断执行的p的效果。实际业务中，你是不能改run的，因为run往往是JS引擎提供的，比如window.onsize，它的触发频率是一秒钟好几次，你能改它的这个机制吗？你不能，你怎么可能改浏览器，所以你只能去改p，p是你写的业务逻辑，你当然能修改。
现在，我们嫌我们的p执行的太密集，太频繁，我们不需要1秒打印一次这么频繁，所以我们想节省浏览器消耗，怎么做？这时候就运用到了“函数节流”和“函数防抖”。
函数节流
现在我的第一个节省系统消耗的想法，就是让p每隔4秒打印一次。怎么做呢？很简单：
-
第一次请求肯定要执行，没说的。
-
立即开始一个4秒定时器，定时器走完之前，不许执行第二次。
-
等定时器走完了，允许执行第二次。
怎么写呢，一起看一下：
print函数不变。run函数不变。新建throttle函数。run接受的参数会变，不再是p，而是throttle(p)。
throttle函数做的事是：
-
如果是第一次执行，那么执行，而且修改firstTime为false。延时器启动。
-
如果是第二次执行，那么就要看延时器有没有到头，也就是说跟上一次调用的时间间隔是不是大于4秒。假如没有到头，则timer为true，那么会终止在
return false这一步。假如到头了，timer为false，那么之前的延时器会执行一次调用，然后这一次会创建新的延时器。 -
不再有新的请求的时候，之前最后的那个延时器会最后执行一次p，然后全剧终。
不难理解吧？
function print() {
var i = 0;
return function () {
i += 1;
console.log(i);
}
}
const p = print();
function throttle(p) {
var firstTime = true;
var timer;
return function () {
if (firstTime) {
p();
firstTime = false;
}
if (timer) {
return false;
}
timer = setTimeout(() => {
clearTimeout(timer);
timer = null;
p();
}, 4000);
}
}
const thro = throttle(p);
function run(p) {
const timer = setInterval(() => {
p();
}, 1000);
}
run(thro);
函数防抖
先说说函数节流和防抖的相同点和区别。
相同点：
都是面对密集的请求，打算节省消耗。
不同点：
-
节流是规定时间间隔内最多执行一次。防抖，是规定时间间隔内如果有新的请求，那么重新延时，一直到规定时间间隔内不再有新的请求，然后执行一次。
-
假设请求的时间间隔一致，那么，节流可能会将原本的100次请求，节流成20次。防抖，会将100次请求缩成1次（也可能是2次，只看第一次是不是允许执行），因为始终有新的请求阻止前一次请求的执行，这么搞下去，最后只有最后一次请求被执行。
这么说起来，防抖函数的写法也就呼之欲出了。
-
我们还是允许第一次请求执行。这里有一点要注意，我们的run函数要改改，不能无穷无尽的执行，不然的话防抖的第二次永远也不会执行。所以run我们设定为执行10秒后就停。
-
防抖函数的原则：
-
有计时器，就无脑终止
-
没有计时器，说明能执行
-
为什么弄了一个canRun，因为你可能希望return p()，这时候return P()只能放在最后。其实就本例来说，可以把
if (canRun) {p();}挪到延时器前面。
-
function print() {
var i = 0;
return function () {
i += 1;
console.log(i);
return i;
}
}
const p = print();
function debounce(p) {
var timer;
return function () {
if (timer) {
clearTimeout(timer);
}
let canRun = !timer;
timer = setTimeout(() => {
timer = null;
p();
}, 2000)
if (canRun) {
p();
}
}
}
const debo = debounce(p);
function run(p) {
var counter = 0;
const timer = setInterval(() => {
p();
if (counter++ === 10) {
clearInterval(timer);
}
}, 1000);
}
run(debo);
总结
说白了，“函数节流”和“函数防抖”就是给被执行的函数套一个壳，保证被执行的函数不会被频繁执行。具体用节流还是防抖，就看业务需要了。你只在乎终点状态，那么用防抖，你不仅在乎终点，还在乎过程，那么用节流。
我这两个函数能不能用于生产
我觉得需要看具体情况，如果没有什么意外情况，业务逻辑简单到爆，代码也不复杂，那么我写的范例都足够了。如果涉及到传参，涉及到作用域和this指向，那就复杂了，可以再查查资料自己写复杂版本的。总之，网上的牛逼版本不一定适合你业务需要，因为可能小题大做，任何人了解了原理都可以自己写一个。
网友评论