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代码如下：
<div id="app"> <div id="data"></div></div>js代码如下：
let num = 1function 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= countFn1.6 防抖函数的应用
实现输入框搜索功能，当我们要搜索一个关键词时，假如连续输入会一直触发防抖，只有在中止输入后，才会触发搜索事件，代码如下：
html代码如下：
<input type="" name=""><div id="content"></div>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代码：
<div id="app"> <div id="data"></div></div>js代码如下：
let num = 1let 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)
