1. 防抖函数
1.1 防抖定义：
函数防抖（debounce）：当持续触发事件时（例如mousemove），一定时间段内没有再触发事件，事件处理函数才执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
1.2 不做防抖的弊端：
前端开发过程中的resize,scorll,mousemove,mousehover等，会被频繁地触发，不做限制的话，有可能一秒之内执行几十次，几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作DOM的函数，那不仅会造成计算机资源的浪费还会降低程序圆形速度，甚至造成浏览器卡死，崩溃。
1.3 防抖的关键：
“函数防抖”的关键在于，在一个动作发生一定时间后，才执行特定事件
1.4 防抖函数基本写法（非立即执行版本）
function debounce (fn, delay) {
let timer = void 0;
//参数就是调用debounce函数的那个函数所拥有的的参数，也就是下面的countFn的参数
return function (...args){
if(timer) clearTimeout(timer)
timer = setTimeout(() =>{
fn(...args)
},delay)
}
}
这个版本不是立即执行版本，立即执行版本怎么写呢？
立即执行版本
function debounce (fn, delay) {
let timer = void 0;
let start = void 0;
//参数就是调用debounce函数的那个函数所拥有的的参数，也就是下面的countFn的参数
return function (...args){
if(!start){
fn(...args)
start = 1;
return
}
if(timer) clearTimeout(timer)
timer = setTimeout(() =>{
fn(...args) //等价于fn.bind(this,args)
},delay)
}
}
这里就是一个完整防抖函数了，假如给某个要素加一个移动事件
document.getElementById('app').onmousemove = debounce(fn,1000)
对于参数的理解：上述版本中出现了两次参数，一次是闭包函数中的...args，另一次是fn的调用中的...args，那么这个参数从哪来的？是从下面的事件调用中来的，事件调用可以这么写。
let eventFn = debounce(fn, 1000)
document.getElementById('app').onmousemove = function(){eventFn(...args)}
1.5 举个例子
假如我们要实现一个鼠标移动的函数
html代码如下：
js代码如下：
let num = 1
function count () {
document.getElementById('data').innerHTML = num
num ++
}
function debounce (fn, delay) {
let timer = void 0;
//参数就是调用debounce函数的那个函数所拥有的的参数，也就是下面的countFn的参数
return function (...args){
if(timer) clearTimeout(timer)
timer = setTimeout(() =>{
fn(...args) //等价于fn.bind(this,args)
},delay)
}
}
let countFn = debounce(count, 1000)
document.getElementById('app').onmousemove= countFn
1.6 防抖函数的应用
实现输入框搜索功能，当我们要搜索一个关键词时，如果连续输入会一直触发防抖，只有在停止输入后，才会触发搜索事件，代码如下：
html代码如下：
js代码如下：
function debounce (fn, delay) {
let timer = void 0;
return function (...args){
if(timer) clearTimeout(timer)
timer = setTimeout(() =>{
fn(...args)
},delay)
}
}
let search = function (content) {
let c = content || ''
document.getElementById('content').innerHTML = c
}
let searchFn = debounce(search, 2000)
document.getElementsByTagName('input')[0].addEventListener('keyup',(e) => {
searchFn(e.target.value)
})
2. 函数节流
2.1 函数节流定义
当持续触发事件时，保证一定时间段内只调用一次事件处理函数
2.2 函数节流与防抖的区别：
- 函数防抖是指一定时间触发一次函数，但是在这个时间内如果再次触发事件，则这个时间重新计算，直到这段时间内没有再次触发事件时才会执行函数。
- 函数节流是指一定时间内不管触发多少次事件，都是有规律的一段时间执行一次函数
2.3 函数节流函数
节流和防抖的函数高度类似，只是flag控制略有不同
let throttle = function(fn, delay){
let flag = true
return function(...args){
if(!flag){return}
flag = false
setTimeout(function(){
fn(...args)
flag = true
},delay)
}
}
2.4 举个例子
还是和防抖函数的例子一样
html代码：
js代码如下：
let num = 1
let count = function(){
document.getElementById('data').innerHTML = num
num ++ ;
}
let throttle = function(fn, delay){
let flag = true
return function(...args){
if(!flag){return}
flag = false
setTimeout(function(){
fn(...args)
flag = true
},delay)
}
}
document.getElementById('app').onmousemove=throttle(count, 1000)