js实现防抖与节流实现原理

本章主要介绍什么是防抖与节流、怎么实现防抖与节流、防抖与节流在实际开发中得作用。

防抖

函数防抖：当持续触发事件时，一定时间内再没有触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了一次事件，就得重新开始延时。
为什么要做防抖？在前端开发过程中，resize，scoll，mousemove，mouseover等事件会被频繁频繁得触发，如果不做限制，1s得时间内有可能执行上百次，甚至上千次。如果这些函数内执行了其他得函数，比如DOM操作得函数，那不仅造成计算机资源得浪费，还会 降低程序得运行速度，甚至造成浏览器崩溃卡死。
函数防抖得核心思想是在触发事件一定得事件内在执行特定得事件。如下是函数防抖函数得一段代码：

 // 防抖函数
    function debounce(fn, delay) {
        let timer = null;
        return function (...args) {
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                fn(...args);
            }, delay)
        }
    }

节流

节流函数;当持续触发一个事件是，保证一段时间段内只执行。重复的 ajax 调用不仅可能会造成请求数据的混乱，还会造成网络拥塞，占用服务器带宽，增加服务器压力，显然这个问题也是需要解决的。节流函数业主要是用了一次式定时器来实现的，节流函数代码如下：

// 节流函数
    function throttle(fn, delay) {
        let flag = true;
        return function (...args) {
            if (!flag) {
                return;
            }
            flag = false;
            setTimeout(() => {
                fn(...args)
                flag = true;
            }, delay);
        }
    }