前端函数防抖和节流

防抖：触发事件后在n秒内函数只执行一次，若在n秒内再次触发则重新计算下次函数响应时间

节流：连续发生的事件在n秒内只执行一次

使用场景：即时查询等需要短时间内请求到服务器端的数据，以一定时间间隔调用函数的场景

代码展示：

  下面以鼠标的onmousemove事件来展示防抖的非立即执行和立即执行版，节流的定时器和时间戳版。

准备代码：

<div id="content"
        style="height: 150px;line-height: 150px;text-align: center;background-color: aquamarine;font-size: 30px;color: brown;">
</div>
<script>
        let num = 1;
        let content = document.getElementById('content');

        function count() {
            content.innerHTML = num++;
        }
</script>

  此时界面上有一个盒子，在盒子内可以滑动鼠标。

无防抖和节流版：鼠标一动，界面上展示的数字就加1，一动就加1

// 鼠标一经过就执行函数
content.onmousemove = count

防抖的非立即执行版：让鼠标移动完毕后过1秒在查询

function debounce(func, wait){
    let timeout;   // 定时器
    return function() {
        if(timeout) clearTimeout(timeout);
        timeout = setTimeout(function(){
            func.apply(this);   // 执行func函数
        }, wait)
    }
}
content.onmousemove = debounce(count, 1000)

防抖的立即执行版：让鼠标移动完毕立即查询，过1秒才能在查询

function debounce(func, wait){
    let timeout;
    return function(){
        if(timeout) clearTimeout(timeout);  // 取消之前的任务
        let callNow = !timeout;   // 类型转化
        timeout = setTimeout(() => {   // 增加一个定时器
            timeout = null       // 清空当前定时器句柄
        }, wait)
        if(callNow) func.apply(this)   // 第一次执行
    }
}
content.onmousemove = debounce(count, 1000)

节流的定时器版：启用定时器，固定的时间去发请求

function throttle(func, wait){
   let timeout;   // 定义一个定时器句柄
    return function(){
        if(!timeout){  // 是否存在定时器
            timeout = setTimeout(() => {  // 创建一个定时器
                timeout = null;
                func.apply(this)   // apply调用函数func即count
            }, wait)
        }
    }
}
content.onmousemove = throttle(count, 1000)

节流的时间戳版：当前时间减去上次请求的时间，固定的时间去发请求

function throttle(func, wait) {
   let prev = 0;  // 上次记录的事件
    return function () {
        let now = Date.now()   // 当前时间
        if (now - prev > wait) {  // 当前时间 - 上次时间 > 等待时间
            func.apply(this)  // 执行函数 发送请求
            prev = now  // 重置上次记录时间
        }
    }
}
content.onmousemove = throttle(count, 1000)

总结：通过防抖和节流，在持续触发事件的过程中可以很好的控制与后台服务交互的次数，减少服务器端的压力。