一文看懂如何简单实现节流函数和防抖函数-创新互联

前言

在日常开发中有很多场景我们都需要用到节流函数和防抖函数，比如：实现输入框的模糊查询因为需要轮询ajax，影响浏览器性能，所以需要用到节流函数；实现手机号、姓名之类的的验证，往往我们只需要验证一次，这个时候我们就需要用到防抖函数；但是网上的很多资料都是不够具体和便于理解。今天自己翻阅了一些资料之后，来简单的谈谈我对节流函数和防抖函数的理解，希望能帮助大家理解；

节流函数

顾名思义，就是节省流量节省内存性能的一种函数，可以理解为是一种性能优化方案；

举个例子：一个水龙头一直在滴水，可能一次性会滴很多水，但是我们想控制它的频率 ，让它每1000毫秒滴一滴水，这个时候我们就可以用到节流函数来进行控制（简单可以理解为类似于周期性定时器）

js代码（可直接复制到编辑器上看效果）：

//首先定义一个全局变量
var canRun = true;
//当浏览器窗口大小发生变化也就是重新计算窗口大小的时候触发
window.onresize = function(){
// 取反，canRun为false的情况下
if(!canRun){
//直接return，后面的代码不执行
 return
}
//走到这来就是canRun为true的情况，然后进行赋值为false
canRun = false

//设置一个定时器进行轮询操作
setTimeout( function () {
//这是要做的事情
 console.log("函数节流")
//最后记得重新赋值true继续让他取反
 canRun = true
//每隔1000毫秒也就是1秒钟就执行一次

 }, 1000)
}