防抖与节流

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 = 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代码如下：

<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 = 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)