前端之防抖与节流。

最近在做前端的过程中，发现项目里有防抖和节流这块的内容，一开始并没有理解代码的意义。

随后在一处页面的按钮上，我找到了它的使用场景，在F12下我反复点击按钮，事件并没有立即触发，在经过指定的一段时间后才触发事件的执行。

隐约中我好像明白了代码在此处场景的使用意义：就是为了防止用户法反复去点击按钮，发起请求，占用网络资源，造成ui堵塞，或者出现重复上传，比方说涉及到事务的操作。

紧接着，我又去网上搜索了这些知识，看到好多大神对他的解析和总结。

概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。

结合大神的案例，我又自己在本地做了相关测试来验证案例，得出一个比较通俗的理解：

防抖：就如同甲和已聊天，甲一直叨叨叨，当甲持续叨叨了一段时间后停止了讲话，过了5秒之后，乙判定甲讲完话了，乙开始回应甲的话；如果5秒内甲又继续叨叨叨，那么乙判定甲没讲完，乙不回应，等甲再次停止后，再次计算停止的时间，如果超过5秒，乙就响应，如果没有则乙不响应。

防抖又分非立即防抖和立即防抖。

非立即防抖：顾名思义，触发事件后函数不会立即执行，而是在n秒之后执行，如果n秒之内又触发了事件，则会重新计算函数执行时间。下面看案例:

代码

点击查看代码

window.addEventListener("click",debounce(handle,5000))

function handle(){
    console.log(Math.random());
}
function debounce(func, wait) {
    var timer = null;
        return function(){
            if(timer !== null){
                clearTimeout(timer);
            }
            timer = setTimeout(func,wait);
        }
}

效果

总结：

1. 应用场景：

• 比方涉及后端数据库事务操作，为了防止反复提交，导致出现的接口超时或者数据重复上传；
• 以及因频繁执行DOM操作，资源加载等行为，导致UI卡顿堵塞等现象。